@import "mixins.scss";

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

.letter-section {
	margin-bottom: 2em;
	h2.letter-title {
		border-bottom: 1px solid black;
		margin-bottom: 0.2em;
		padding-bottom: 0.2em;
		width: 100%;
	}
	ul, ul li {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	ul.columns {
		width: 100%;
		box-sizing: border-box;
		column-gap: 0.6em;
		column-width: 15em;
		line-height: 1.6em;
		li {
			display: block;
		}
		&.max-0-columns,
		&.max-1-columns {
			column-count: 1;
			max-width: 15.6em;
		}
		@for $column from 2 to 16 {
			&.max-#{$column}-columns {
				column-count: $column;
				max-width: ($column * 15em) + (($column - 1) * 0.6em);
			}
		}
	}
	div.back-to-top {
		width: 100%;
		text-align: right;
		a {
			text-transform: uppercase;
			font-size: 0.7em;
			&:before,
			&:after {
				font-family: dashicons;
				content: "\f343";
				padding: 0.2em;
			}
		}
	}
}