@charset 'UTF-8';

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

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

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

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

			&::before {
				display: none;
			}

			@include 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: rhythm(1);
		padding-right: rhythm(2);
		padding-bottom: rhythm(1);
		padding-left: rhythm(2);
		border-bottom: 2px solid $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 bp-up(lg) {
			font-size: 100%;
		}
	}

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

@include 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 molecule(table) {
	@include table();

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

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

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

	@include 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 m(align-text-center) {
		th,
		td {
			text-align: center;

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

	@include 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: rhythm(4);
			padding-right: rhythm(3);

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

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

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

		tfoot {
			tr {
				background-image: none;

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

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

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

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

@include b(table-scroll-wrapper) {

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

	@include bp-up(sm) {
		@include 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();
}