@use 'mixins/mixins';
@use './common/var';

@include mixins.b(select-dropdown) {
	@include mixins.e(item) {
		font-size: var.$select-font-size;
		padding: var(--select--option--padding, 0 20px);
		position: relative;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: var.$select-option-color;
		min-height: var.$select-option-height;
		height: auto;
		line-height: var(--select--option--line-height, var.$select-option-height);
		box-sizing: border-box;
		cursor: pointer;
		display: flex;
		align-items: center;

		@include mixins.when(disabled) {
			color: var.$select-option-disabled-color;
			cursor: not-allowed;

			&:hover {
				background-color: var.$color-white;
			}
		}

		&.hover,
		&:hover {
			background-color: var.$select-option-hover-background;
		}

		&.selected {
			color: var.$select-option-selected-font-color;
			font-weight: var(--font-weight--bold);
		}
	}
}