@use '../tokens/index.scss' as tokens;
@use '../mixins/index.scss' as mixins;

$sc-padding-sm: 0.5em 1em !default;
$sc-padding: 0.75em 1.25em !default;
$sc-padding-lg: 1em 1.5em !default;

$sc-font-color: tokens.$primary !default;
$sc-border: tokens.$border-width solid tokens.$border !default;
$sc-border-radius-rounded: tokens.$border-radius-rounded;
$sc-hover-background-color: tokens.$primary-background !default;
$sc-hover-border: tokens.$border-width solid tokens.$border !default;
$sc-hover-border-color: tokens.$primary-hover !default;
$sc-active-hover-background-color: tokens.$primary-hover !default;
$sc-active-hover-border-color: tokens.$primary-hover !default;
$sc-active-background-color: tokens.$primary !default;
$sc-active-border-color: tokens.$primary !default;
$sc-active-color: tokens.$text-invert !default;

.segmented-controls {
	display: grid;
	justify-content: center;
	width: 100%;
	grid-gap: tokens.$spacer-3;
	grid-template-columns: max-content auto max-content;
	font-size: tokens.$font-size-7;
	white-space: nowrap;

	.segmented-control-previous,
	.segmented-control-next {
		display: flex;
		align-items: center;
		padding: $sc-padding-sm;
		border: $sc-border;
		border-radius: $sc-border-radius-rounded;
		background-color: $sc-active-background-color;
		color: $sc-active-color;
		font-weight: tokens.$weight-semibold;
		cursor: pointer;

		&:hover {
			background-color: $sc-active-hover-background-color;

			@include mixins.forced-colors {
				border-color: Highlight;
				background-color: Highlight;
				color: HighlightText;
				forced-color-adjust: none;
			}
		}

		@include mixins.focus-visible() {
			outline-color: tokens.$text-invert;
			outline-offset: -(tokens.$focus-outline-offset);
		}
	}

	.segmented-control-list {
		grid-column: 2;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		border: $sc-border;
		border-radius: $sc-border-radius-rounded;
		overflow-x: hidden;
	}

	.segmented-control {
		display: flex;
		position: relative;
		align-items: center;
		justify-content: center;
		padding: $sc-padding-sm;
		border: none;
		border-radius: $sc-border-radius-rounded;
		background-color: transparent;
		color: $sc-font-color;
		font-weight: tokens.$weight-semibold;
		cursor: pointer;
		appearance: none;
		vertical-align: top;

		@include mixins.focus-visible() {
			outline-color: tokens.$text-invert;
			outline-offset: -(tokens.$focus-outline-offset);
		}

		&:hover {
			background-color: $sc-hover-background-color;
			z-index: tokens.$zindex-hover;

			@include mixins.forced-colors {
				background-color: Highlight !important;
				color: HighlightText !important;
				forced-color-adjust: none;
			}
		}

		&[aria-selected='true'] {
			background-color: $sc-active-background-color;
			color: $sc-active-color;
			z-index: tokens.$zindex-active;

			&:hover {
				background-color: $sc-active-hover-background-color;
				z-index: tokens.$zindex-hover;
			}

			@include mixins.forced-colors {
				background-color: SelectedItem;
				color: SelectedItemText;
				forced-color-adjust: none;
			}
		}
	}

	@include mixins.tablet {
		.segmented-control,
		.segmented-previous,
		.segmented-next {
			padding: $sc-padding;
		}
	}

	@include mixins.desktop {
		.segmented-control,
		.segmented-previous,
		.segmented-next {
			padding: $sc-padding-lg;
		}
	}
}