@import "mixins.scss";

$defaultColumnCount: 3;
$defaultColumnWidth: 15em;
$defaultColumnGap: 0.6em;

.az-letters,
.a-z-listing-widget .az-letters,
.a-z-listing-widget.widget .az-letters {
	white-space: initial;
	> ul.az-links {
		padding: 0;
		margin: 0;
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		font-size: 1.2em;
		> li {
			list-style: none;
			width: 2.6em;
			height: 2.4em;
			box-sizing: border-box;
			margin: 0 0.1em 0.6em;
			border: 2px solid #e5e5e5;
			background: #f5f5f5;
			color: #adadad;
			display: flex;
			align-items: center;
			justify-content: center;
			&:before,
			&:after {
				content: initial;
			}
			a {
				color: #1f7d9a;
				text-decoration: none;
				border: 0;
				box-shadow: none;
			}
		}
	}
}

div.letter-section {
	margin-bottom: 2em;
	white-space: initial;
	h2.letter-title {
		border-bottom: 1px solid black;
		margin-bottom: 0.2em;
		padding-bottom: 0.2em;
		width: 100%;
	}
	> ul.az-columns {
		padding: 0;
		margin: 0;
		width: 100%;
		float: initial;
		box-sizing: border-box;
		line-height: 1.6em;
		column-count: $defaultColumnCount;
		column-gap: $defaultColumnGap;
		column-width: $defaultColumnWidth;
		column-count: var(--a-z-listing-column-count, #{$defaultColumnCount});
		column-gap: var(--a-z-listing-column-gap, #{$defaultColumnGap});
		column-width: var(--a-z-listing-column-width, #{$defaultColumnWidth});

		> li {
			padding: 0;
			margin: 0 0 0.6em;
			list-style: none;
			display: block;
		}

		@for $column from 1 to 17 {
			&.max-#{$column}-columns {
				column-count: $column;
				column-count: min(var(--a-z-listing-column-count, $defaultColumnCount), $column);
				// Legacy
				max-width:
					($column * $defaultColumnWidth)
					+ (($column - 1) * $defaultColumnGap);
				// Browsers that support calc() and var()
				max-width: unquote('calc((min(var(--a-z-listing-column-count, #{$defaultColumnCount}), #{$column}) * var(--a-z-listing-column-width, #{$defaultColumnWidth})) + ((min(var(--a-z-listing-column-count, #{$defaultColumnCount}), #{$column}) - 1) * var(--a-z-listing-column-gap, #{$defaultColumnGap})))');
			}
		}
	}
	div.back-to-top {
		display: var(--a-z-listing-back-to-top-display, block);
		width: 100%;
		text-align: right;
		a {
			text-transform: uppercase;
			font-size: 0.7em;
			&:before,
			&:after {
				font-family: dashicons;
				content: "\f343";
				padding: 0.2em;
			}
		}
	}
}