@use "sass:string";

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

.az-letters,
.alphalisting-widget .az-letters,
.alphalisting-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.08em;
			height: 1.92em;
			box-sizing: border-box;
			margin: 0 0.1em 0.6em;
			border: 1px solid transparent;
			background: #f5f5f5;
			color: #adadad;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 0.4em;

			&:before,
			&:after {
				content: initial;
			}

			&:has(> a):hover {
				border-color:#e5e5e5;
				box-shadow: 0 0 3px #e5e5e5;
			}
			
			a {
				display: flex;
				width: 100%;
				height: 100%;
				align-items: center;
				justify-content: center;
				color: #1f7d9a;
				text-decoration: none;
				border: 0;
				box-shadow: none;
			}
			
		}

	}

}

.alphalisting-widget.widget .az-letters {

	> ul.az-links {
		justify-content: flex-start;
	}
	
}

div.letter-section {

	margin-bottom: 1em;
	white-space: initial;

	h2.letter-title {
		border-bottom: 1px solid #000;
		margin-bottom: 0.4em;
		padding-bottom: 0.2em;
		width: 100%;
	}

	> ul.az-columns {
		padding: 0;
		margin: 0;
		width: 100%;
		float: initial;
		box-sizing: border-box;
		line-height: 1.3em;
		column-count: $defaultColumnCount;
		column-gap: $defaultColumnGap;
		column-width: $defaultColumnWidth;
		column-count: var(--alphalisting-column-count, #{$defaultColumnCount});
		column-gap: var(--alphalisting-column-gap, #{$defaultColumnGap});
		column-width: var(--alphalisting-column-width, #{$defaultColumnWidth});

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

		@for $column from 1 to 17 {
			&.max-#{$column}-columns {
				column-count: $column;
				column-count: min(var(--alphalisting-column-count, $defaultColumnCount), $column);
				// Legacy
				max-width:
					($column * $defaultColumnWidth)
					+ (($column - 1) * $defaultColumnGap);
				// Browsers that support calc() and var()
				max-width: string.unquote('calc((min(var(--alphalisting-column-count, #{$defaultColumnCount}), #{$column}) * var(--alphalisting-column-width, #{$defaultColumnWidth})) + ((min(var(--alphalisting-column-count, #{$defaultColumnCount}), #{$column}) - 1) * var(--alphalisting-column-gap, #{$defaultColumnGap})))');
			}
		}

	}

	div.back-to-top {

		display: flex;
		align-items: center;
		justify-content: end;

		a {

			display: flex;
			align-items: center;
			justify-content: center;
			text-transform: uppercase;
			text-decoration: none;
			font-size: 0.7em;
			color: #1f7d9a;
			line-height: normal;
			background-color: #f5f5f5;
			padding: 3px 6px;
			gap: 3px;
			box-sizing: border-box;
			border: 1px solid transparent;
			border-radius: 0.4em;

			&:hover {
				border-color:#e5e5e5;
				box-shadow: 0 0 3px #e5e5e5;
			}

		}

	}

}