@use "sass:color";
@use "../../scss/z-index";
@use "../../scss/calypso-colors";
@use "../../scss/mixins/icons";

/**
 * Select Dropdown
 */

.dops-select-dropdown {
	height: 43px;

	&.is-compact {
		height: 28px;
	}

	&.is-disabled .dops-select-dropdown__header {
		background: calypso-colors.$gray-light;
		border-color: color.adjust(calypso-colors.$gray, $lightness: 30%);
		color: color.adjust(calypso-colors.$gray, $lightness: 10%);
		-webkit-text-fill-color: color.adjust(calypso-colors.$gray, $lightness: 10%);
	}
}

.dops-select-dropdown__container {
	position: relative;
	overflow: hidden;
	display: inline-block;
	width: auto;
	max-width: 100%;

	.dops-select-dropdown.is-open & {
		z-index: z-index.z-index("root", ".dops-select-dropdown.is-open .dops-select-dropdown__container");
	}

	.dops-accessible-focus &:focus,
	.dops-accessible-focus .dops-select-dropdown.is-open & {
		z-index: z-index.z-index("root", ".dops-accessible-focus .dops-select-dropdown.is-open .dops-select-dropdown__container");
		box-shadow: 0 0 0 2px calypso-colors.$blue-light;

		.select-dropdown__header {
			border-color: calypso-colors.$blue-wordpress;
		}
	}

	.dops-accessible-focus &:focus {
		border-color: #00aadc;
		box-shadow: 0 0 0 2px #78dcfa;
		outline: 0;
		border-radius: 4px;
	}
}

.dops-select-dropdown__header {
	box-sizing: content-box;
	padding: 11px 44px 11px 16px; // 44 = padding (16) + arrow width (20) + arrow margin (8)
	border-style: solid;
	border-color: color.adjust(calypso-colors.$gray, $lightness: 20%);
	border-width: 1px 1px 2px;
	border-radius: 4px;
	background-color: calypso-colors.$white;
	font-size: 14px;
	font-weight: 600;
	line-height: 18px;
	height: 18px;
	color: calypso-colors.$gray-dark;
	transition: background-color 0.2s ease;
	cursor: pointer;

	&::after {

		@include icons.dashicons;
		content: "\f347";
		position: absolute;
		right: 13px;
		top: 12px;

		.is-compact & {
			right: 4px;
			top: 4px;
		}

		display: block;
		line-height: 18px;
		color: rgba(calypso-colors.$gray, 0.5);
	}


	.is-compact & {
		padding: 7px;
		color: color.adjust(calypso-colors.$gray, $lightness: -10%);
		font-size: 11px;
		line-height: 1;
		text-transform: uppercase;

		.dops-count {
			border-width: 0;
			margin-left: 0;
			line-height: 1;
		}
	}

	.dops-select-dropdown.is-open & {
		border-radius: 4px 4px 0 0;
		box-shadow: none;
		background-color: calypso-colors.$gray-light;

		&::after {

			@include icons.dashicons;
			content: "\f343";
		}
	}

	.dops-count {
		margin-left: 8px;
	}
}

.dops-select-dropdown__header-text {
	display: block;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.dops-select-dropdown__options {
	visibility: hidden;
	height: 0;
	box-sizing: border-box;
	padding: 0;
	list-style: none;
	margin: -2px 0 0 0; // account for border overlap with .select-dropdown__header
	background-color: calypso-colors.$white;
	border: 1px solid color.adjust(calypso-colors.$gray, $lightness: 20%);
	// $blue-wordpress for outer (with focus shadow), $gray for border with header
	border-radius: 0 0 4px 4px;

	.dops-accessible-focus & {
		border: solid 1px calypso-colors.$blue-wordpress;
		border-top-color: color.adjust(calypso-colors.$gray, $lightness: 20%);
	}

	.dops-select-dropdown.is-open & {
		visibility: visible;
		height: auto;
	}
}

.dops-select-dropdown__option {

	&:last-child .dops-select-dropdown__item {
		border-radius: 0 0 4px 4px;
	}
}

.dops-select-dropdown__item,
.dops-select-dropdown__item-text {
	padding: 11px 44px 11px 16px;
}

.dops-select-dropdown__item {
	display: block;
	position: relative;
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	color: calypso-colors.$gray-dark;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	cursor: pointer;

	&::before {
		content: attr(data-bold-text);
		font-weight: 700;
		opacity: 0;
	}

	&:visited {
		color: calypso-colors.$gray-dark;
	}

	&.is-selected {
		background-color: calypso-colors.$blue-medium;
		color: calypso-colors.$white;
	}

	&.is-disabled {
		background-color: calypso-colors.$white;
		color: calypso-colors.$gray;
		cursor: default;
		opacity: 0.5;
	}

	.notouch & {
		// Make sure :visited links stay blue
		&:hover {
			color: calypso-colors.$blue-medium;
		}

		&.is-selected:hover {
			color: calypso-colors.$white;
		}
	}
}

.dops-select-dropdown__item-text {
	padding-right: 16px;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: inherit;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;

	.dops-count {
		color: inherit;
		border-color: inherit;
	}
}

.dops-select-dropdown__separator {
	border-top: 1px solid color.adjust(calypso-colors.$gray, $lightness: 20%);
	display: block;
	margin: 8px 0;
}

.dops-select-dropdown__label {
	display: block;
	color: color.adjust(calypso-colors.$gray, $lightness: 10%);
	margin-top: 5px;
	line-height: 20px;

	label {
		font-size: 12px;
		text-transform: uppercase;
		padding: 0 16px 0 16px;
	}
}

.dops-select-dropdown.is-rna {

	.dops-select-dropdown__container {

		.dops-accessible-focus &:focus,
		.dops-accessible-focus .dops-select-dropdown.is-open & {
			z-index: z-index.z-index("root", ".dops-accessible-focus .dops-select-dropdown.is-open .dops-select-dropdown__container");
			box-shadow: 0 0 0 2px var(--jp-green-30);

			.select-dropdown__header {
				border-color: var(--jp-green);
			}
		}

		.dops-accessible-focus &:focus {
			border-color: transparent;
			box-shadow: 0 0 0 2px var(--jp-white), 0 0 0 4px var(--jp-green-50);
			outline: 0;
			border-radius: 4px;
		}
	}

	.dops-select-dropdown__header {
		border-width: 1px;
		border-color: var(--jp-gray-5);

		&::after {
			color: var(--jp-black-80);
		}
	}

	.dops-select-dropdown__options {

		.dops-accessible-focus & {
			border-color: var(--jp-green);
		}
	}

	.dops-select-dropdown__option {
		margin-bottom: 0;
	}

	.dops-select-dropdown__item {

		&.is-selected {
			background-color: var(--jp-black);
			color: var(--jp-white);
		}

		.notouch & {

			&:hover {
				color: var(--jp-green);
			}

			&.is-selected:hover {
				color: calypso-colors.$white;
			}
		}
	}
}
