.tify-page-select {
	> .tify-dropdown-button {
		@extend %button;
		height: 100%;
		line-height: 1.5;
		max-width: g(5);
		min-width: g(3);
		overflow: hidden;
		padding-left: g(.375);
		padding-right: g(.375);
		text-overflow: ellipsis;
		white-space: nowrap;

		@container (#{$small}) {
			max-width: g(8);
			min-width: g(4);
		}

		@container (#{$medium}) {
			max-width: g(10);
		}

		@container (#{$large}) {
			max-width: g(12);
		}
	}

	&:not(:only-child) > .tify-dropdown-button {
		border-radius: $br 0 0 $br;

		&:not(:focus, :hover) {
			border-right: 0;
			padding-right: calc(g(.375) + 1px);
		}
	}

	> .tify-dropdown-content {
		max-width: g(10);
		min-width: 100%;

		@container (#{$large}) {
			max-width: g(15);
		}
	}
}

.tify-page-select-filter {
	margin: 0 0 clamp(1px, $br, 4px);
}

.tify-page-select-input {
	width: 100%;
}

.tify-page-select-list {
	max-height: g(13.5);
	min-width: 100%;
	overflow-y: scroll;
	position: relative; // For scroll calculation

	> li > a {
		&.-current {
			@extend %button-active;
		}

		&.-highlighted {
			border-color: light-dark(black, white);
		}
	}

	.tify-page-name {
		width: max-content;
	}
}