@import '@financial-times/o-private-foundation/main';

@import '@financial-times/o-brand/main';

@import './src/scss/variables';
@import 'src/scss/brand';
@import 'src/scss/base';

/// Output all oMultiSelect features
/// @access public
/// @example scss
///		@include oMultiSelect()
@mixin oMultiSelect() {
	@include oPrivateFoundation();

	.o-multi-select__dropdown-menu {
		display: none;
	}
	.o-multi-select__enhanced {
		position: relative;
	}

	.o-multi-select__visually-hidden {
		@include oPrivateNormaliseVisuallyHidden;
	}

	.o-multi-select__selected-options {
		display: none;
		list-style-type: none;
		padding: $_o-multi-select-padding;
		margin: 0;
		position: absolute;
		z-index: 1;

		li {
			display: inline-block;
			margin-bottom: 0;

			.o-multi-select__selected-options-button {
				@include _oMultiSelectButton;
			}
		}
	}

	.o-multi-select__combobox-wrapper {
		@include oPrivateTypographySans(0);
		position: relative;
		background-color: oPrivateFoundationGet('o3-color-palette-white');
		border: $_o-multi-select-border;

		.o-multi-select__combobox {
			display: flex;
			height: $_o-multi-select-height;
			box-sizing: border-box;
			padding: $_o-multi-select-padding;
			background-image: url(https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:arrow-down?source=origami-build-service&format=svg);
			background-repeat: no-repeat;
			background-size: $_o-multi-select-icon-size $_o-multi-select-icon-size;
			cursor: pointer;
			background-position: right 8px center;
			align-items: center;

			&:focus {
				@include oPrivateNormaliseFocusUnsetContent();
			}

			@supports selector(:focus-visible) {
				&:focus-visible {
					@include oPrivateNormaliseFocusContent();
				}
			}
		}
	}
	.o-multi-select__dropdown-menu {
		@include oPrivateNormaliseBoxSizing();
		@include oPrivateTypographySans(0);
		width: 100%;
		background-color: oPrivateFoundationGet('o3-color-palette-white');
		padding: $_o-multi-select-padding;
		border: $_o-multi-select-border;
		position: absolute;
		left: 0;
		max-height: 50vh;
		overflow-y: auto;

		.o-multi-select-option {
			color: oPrivateFoundationGet('o3-color-use-case-body-text');
			cursor: pointer;
			padding: 8px 4px;
			position: relative;

			&:hover {
				background-color: oPrivateColorsMix(
					'o3-color-palette-black',
					'o3-color-palette-white',
					25
				);
				color: initial;
			}

			@media (max-width: 690px) {
				padding: 12px 4px;
			}
		}

		.o-multi-select-option__selected {
			color: initial;
			background-color: oPrivateColorsMix(
				'o3-color-palette-black',
				'o3-color-palette-white',
				15
			);

			span {
				@include oPrivateIconsContent(
					$icon-name: 'tick',
					$color: oPrivateFoundationGet('o3-color-use-case-body-text'),
					$size: 32,
					$include-base-styles: false
				);
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				vertical-align: middle;
			}
		}

		.o-multi-select-option__current {
			@include oPrivateNormaliseFocusContent();
			z-index: 2;
		}
	}
}