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

/* stylelint-disable selector-no-qualifying-type */

$select-color: tokens.$text !default;
$select-background-color: tokens.$body-background !default;
$select-border-color: tokens.$control-border !default;
$select-border-bottom-color: tokens.$control-border-bottom !default;
$select-placeholder-color: tokens.$text-subtle !default;

$select-hover-color: tokens.$text !default;
$select-hover-border-color: tokens.$default-hover !default;
$select-focus-border-color: tokens.$primary !default;

$select-disabled-color: tokens.$text-subtle !default;
$select-disabled-background-color: tokens.$body-background-medium !default;
$select-disabled-border-color: tokens.$table-border-dark !default;

$select-danger-border-color: tokens.$danger !default;
$select-success-border-color: tokens.$success !default;

$select-focus-box-shadow-size: 0 0.0625rem 0 0 !default;

.select {
	position: relative;
	font-size: mixins.$control-font-size;

	select {
		@include mixins.control;

		width: 100%;
		max-width: 100%;
		border-color: $select-border-color;
		border-block-end-color: $select-border-bottom-color;
		background-color: $select-background-color;
		color: $select-color;
		font-size: 1em;
		cursor: pointer;

		&[multiple] {
			padding: 0;
			overflow-y: auto;

			option {
				padding: mixins.$control-padding-vertical mixins.$control-padding-horizontal;
			}
		}

		&:hover {
			border-color: $select-hover-border-color;
			border-block-end-color: $select-border-bottom-color;
		}

		&[disabled] {
			border-color: $select-disabled-border-color;
			background-color: $select-disabled-background-color;
			color: $select-disabled-color;
		}

		@include mixins.focus-visible {
			@extend %focus;

			border-block-end-color: $select-focus-border-color;
			outline-color: transparent;
			outline-offset: 0;
			outline-style: solid;
			box-shadow: $select-focus-box-shadow-size $select-focus-border-color;
		}
	}

	&:not(.select-multiple) {
		select {
			padding-inline-end: calc(
				mixins.$control-padding-horizontal + mixins.$chevron-arrow-actual-width
			);
		}

		&::after {
			@include mixins.chevron-down;

			display: block;
			position: absolute;
			inset-block-start: calc(50% - mixins.$chevron-arrow-actual-width / 2);
		}

		&.select-disabled::after {
			border-color: $select-disabled-border-color;
		}
	}

	&.select-sm {
		font-size: mixins.$control-sm-font-size;
	}

	&.select-lg {
		font-size: mixins.$control-lg-font-size;
	}

	&.select-danger select {
		border-color: $select-danger-border-color;

		@include mixins.focus-visible() {
			border-color: $select-border-color;
			border-block-end-color: $select-danger-border-color;
			box-shadow: $select-focus-box-shadow-size $select-danger-border-color;
		}
	}

	&.select-success select {
		border-color: $select-success-border-color;

		@include mixins.focus-visible() {
			border-color: $select-border-color;
			border-block-end-color: $select-success-border-color;
			box-shadow: $select-focus-box-shadow-size $select-success-border-color;
		}
	}
}