@charset "UTF-8";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/config' as config;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@use '../../vendor/grid/breakpoints' as breakpoint;

@mixin table() {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	counter-reset: table-counter;

	caption {
		font-family: var.$font-family-headings;
		padding-top: func.rhythm(1);
		padding-bottom: func.rhythm(1);
	}

	thead,
	tfoot {
		font-family: var.$font-family-mono;
		font-size: 85%;
		text-transform: uppercase;
	}

	tfoot {
		th,
		td {
			border-top: 2px solid colors.$color-granit;
			font-family: var.$font-family-headings;
			font-size: 90%;

			&::before {
				display: none;
			}

			@include breakpoint.bp-up(lg) {
				font-size: 100%;
			}
		}

		td {
			border-top-width: 1px;
		}
	}

	tbody {
		font-weight: normal;

		th {
			border-bottom-width: 1px;
		}
	}

	th {
		font-weight: normal;
	}

	th,
	td {
		padding-top: func.rhythm(1);
		padding-right: func.rhythm(2);
		padding-bottom: func.rhythm(1);
		padding-left: func.rhythm(2);
		border-bottom: 2px solid colors.$color-granit;
		color: var(--cyberspace-color);
		font-size: 90%;
		text-align: left;

		&:first-child {
			text-align: left;
		}

		span:not(.block-icon) {
			display: block;
			font-weight: 400;
		}

		a {
			white-space: nowrap;
		}

		p {
			display: inline;
		}

		@include breakpoint.bp-up(lg) {
			font-size: 100%;
		}
	}

	td {
		border-bottom-width: 1px;
	}
}

@include bem.b(table-container) {
	position: relative;
	width: 100%;
	max-width: 1320px;
	margin-right: auto;
	margin-left: auto;

	&:focus {
		outline: none;
	}
}

@keyframes xPulse {
	0% {
		right: 0;
		opacity: 1;
	}

	50% {
		right: 10px;
		opacity: 0.3;
	}

	100% {
		right: 0;
		opacity: 1;
	}
}

@include mixin.molecule(table) {
	@include table();

	@include bem.m(columns) {
		th {
			border-bottom: 2px solid colors.$color-granit;
		}

		td {
			border-bottom: 1px solid colors.$color-granit;
		}

		th,
		td {
			&:nth-child(even) {
				background-color: var(--snow-color);
			}
		}
	}

	@include bem.m(rows) {
		thead {
			th {
				background-color: var(--ash-color);
			}
		}

		tbody {
			tr:nth-child(odd) {
				th,
				td {
					background-color: var(--snow-color);
				}
			}

			tr:nth-child(even) {
				th,
				td {
					background-color: var(--ash-color);
				}
			}
		}
	}

	@include bem.m(align-text-center) {
		th,
		td {
			text-align: center;

			&:first-child {
				text-align: left;
			}
		}
	}

	@include bem.m(increment) {
		tbody {
			tr:nth-child(odd) {
				th,
				td {
					background-color: var(--ash-color);
				}
			}

			tr:nth-child(even) {
				th,
				td {
					background-color: var(--snow-color);
				}
			}
		}

		th {
			width: func.rhythm(4);
			padding-right: func.rhythm(3);

			&::before {
				content: counter(table-counter);
				counter-increment: table-counter;
			}
		}
	}

	@include bem.m(lines) {
		tbody {
			tr {
				background-image:
					linear-gradient(
							to right,
							colors.$color-cyberspace,
							colors.$color-cyberspace 2px,
							transparent 2px,
							transparent 6px
					);
				background-repeat: repeat-x;
				background-position: bottom left;
				background-size: 6px 1px;
			}

			td,
			th {
				padding-top: func.rhythm(2);
				padding-bottom: func.rhythm(2);
				border: 0;
			}
		}

		tfoot {
			tr {
				background-image: none;

				th,
				td {
					border: 0;
				}
			}
		}
	}
}

@include bem.b(scroll-indicator) {
	display: block;
	position: relative;
	width: 100%;
	height: func.rhythm(3);

	&::before {
		content: 'Scroll';
		position: absolute;
		z-index: func.z_index(background);
		top: 0;
		right: func.rhythm(3);
		width: func.rhythm(7);
		height: 0;
		animation: xPulse 2s infinite;
		font-family: var.$font-family-mono;
		font-size: 80%;
		text-transform: uppercase;
	}

	&::after {
		content: '›';
		position: absolute;
		z-index: func.z_index(background);
		top: -#{func.to_rem(4px)};
		right: 0;
		animation: xPulse 2s infinite;
		font-family: var.$font-family-mono;
	}
}

@include bem.b(table-scroll-wrapper) {

	@include bem.b(table-container) {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
	}

	@include breakpoint.bp-up(sm) {
		@include bem.b(scroll-indicator) {
			display: none;
		}
	}
}

// Default styling for tables without classes
table {
	@include table();
}

// Styling for default WP Table Block
.wp-block-table {
	@include table();
}