@import '../less/variables/colors.less';

.c-font-selector {
	display: block;
	position: relative;
}

.c-font-selector__select {
	background-color: #fff;
	border: 1px solid @color-gray-x-light;
	border-radius: 3px;
	color: @color-gray-x-dark;
	cursor: pointer;
	display: grid;
	font-size: 14px;
	grid-template-columns: auto 8px;
	height: 34px;
	line-height: 1.7;
	padding: 5px 12px;
	width: 100%;

	&.is-disabled {
		background-color: @color-gray-xx-light;
		color: @color-ui-theme-text-disabled;
		cursor: not-allowed;
	}
}

.c-font-selector__select__icon {
	padding-top: 4px;
}

.c-font-selector__warning {
	color: @color-danger;
	position: absolute;
	right: 0;
}

.c-font-selector__dropdown {
	background-color: #fff;
	border: 1px solid @color-gray-x-light;
	border-radius: 4px;
	box-shadow: @dropdown-box-shadow;
	display: none;
	max-height: 300px;
	position: absolute;
	top: 36px;
	width: 370px;
	z-index: 2;

	&.is-visible {
		display: block;
	}

	&.is-showing-popular {
		max-height: 330px;
	}
}

.c-font-selector__dropdown__header {
	border-bottom: 1px solid @color-gray-xx-light;
	display: flex;
	font-size: 13px;
	justify-content: space-between;
	padding: 5px 10px;
}

.c-font-selector__dropdown__header__label {
	color: @color-gray-medium;
	font-weight: 700;
}

.o-form-control.c-font-selector__input {
	margin: 4px 3px 10px;
	outline: none;
	padding-right: 36px; // add padding to not allow text under close button
	width: 362px;

	.c-font-selector__dropdown.is-showing-popular & {
		margin: 4px 3px 0;
	}
}

.c-font-selector__dropdown__spinner.far {
	// combination selector used to override FA styles
	display: none;
	position: absolute;
	right: 10px;
	top: 14px;

	&.is-visible {
		display: inline;
	}
}

.c-font-selector__dropdown__close {
	cursor: pointer;
	display: inline;
	font-size: 20px;
	position: absolute;
	right: 10px;
	top: 11px;

	&:hover {
		color: @color-gray-x-dark;
	}
}

.c-font-selector__dropdown__matches {
	max-height: 250px;
	overflow-y: auto;
}

.c-font-selector__match-row {
	cursor: pointer;
	padding: 5px 10px;

	&.with-mouse:hover,
	&.with-keyboard.is-selected {
		background-color: @color-gray-xx-light;
	}
}