@import "../style/vars";
@import "../style/mixins";
@import "../style/variant";
@import "./select.mixin";
$ssv-select-default-color: $ssv-secondary-color !default;
$ssv-select-default-color-contrast: $ssv-color-black !default;
$ssv-select-default-item-selected-color-contrast: $ssv-color-white !default;
$ssv-select-default-item-color-hover: rgba($ssv-color-black, 0.1) !default;
$ssv-select-default-list-background-color: $ssv-color-white !default;
$ssv-select-default-clear-color-hover: rgba($ssv-color-black, 0.6) !default;
$ssv-select-no-options-color: rgba($ssv-color-black, 0.2) !default;
$ssv-select-disabled-primary-color: rgba($ssv-color-black, 0.12) !default;
$ssv-select-disabled-secondary-color: rgba($ssv-color-black, 0.26) !default;
$ssv-select-input-box-padding: 0.5em 0.5em !default;

.ssv-select {
	display: block;
	position: relative;
	color: $ssv-select-default-color-contrast;
	min-width: 300px;
	margin-top: 1rem;
	border: none;
	outline: none;
	border-radius: 0;
	background: transparent;
	margin-bottom: 0.5em;

	@include element("placeholder") {
		position: absolute;
		top: 10;
		left: 5;
		font-size: 1rem;
		transition: 0.2s ease-out;
		user-select: none;

		@include modifier("active") {
			color: $ssv-select-default-color;
			font-size: 0.8rem;
			transform: translateY(-140%);
		}
	}

	@include element("label") {
		transition: all 0.3s;
		user-select: none;

		@include modifier("multi") {
			display: inline-block;
			font-size: 0.7rem;
			padding: 0.3em 0.5em;
			margin-right: 0.3em;
			margin-bottom: 1px;
			background-color: $ssv-select-default-color;
			border-radius: 3px;

			.ssv-select__clear {
				padding-right: 0;
				padding-left: 0.2em;
			}
		}
	}

	@include element("input-box") {
		display: flex;
		cursor: pointer;
		padding: $ssv-select-input-box-padding;
		border-bottom: solid 1px $ssv-select-default-color;

		.ssv-select_text-container {
			flex: 1;
		}

		.ssv-select__icon-container {
			display: flex;
			flex-flow: row wrap;
			justify-content: flex-end;
		}

		@include modifier("active") {
			margin-bottom: -1px;
			border-bottom-width: 2px;
		}
	}

	@include element("clear") {
		padding-right: 0.5em;
		color: $ssv-select-default-color-contrast;

		&:hover {
			color: $ssv-select-default-clear-color-hover;
		}
	}

	@include element("arrow") {
		color: $ssv-select-default-color-contrast;
	}

	@include element("list-container") {
		@include shadow-4dp;
		position: absolute;
		width: 100%;
		top: 100%;
		z-index: $ssv-drop-over-index;
	}

	@include element("input-filter") {
		display: block;
		box-sizing: border-box;
		width: 100%;
		border: 0;
		outline: none;
		padding: 0.8em 0.5em;
	}

	@include element("list") {
		cursor: pointer;
		list-style-type: none;
		margin: 0;
		padding: 0;
		background-color: $ssv-select-default-list-background-color;
	}

	@include element("item") {
		padding: $ssv-select-input-box-padding;

		@include modifier("group-item") {
			padding-left: 1em;
		}

		@include modifier("highlight") {
			font-weight: 600;
		}

		&:hover {
			background-color: $ssv-select-default-item-color-hover;
			color: $ssv-select-default-color-contrast;
		}

		@include modifier("selected") {
			background-color: $ssv-select-default-color;
			color: $ssv-select-default-item-selected-color-contrast;

			&:hover {
				background-color: $ssv-select-default-color;
				color: $ssv-select-default-item-selected-color-contrast;
			}
		}

		@include modifier("focused") {
			background-color: $ssv-select-default-item-color-hover;
			color: $ssv-select-default-color-contrast;
		}
	}

	@include element("group-header") {
		cursor: default;
		font-weight: 600;
		text-transform: capitalize;
		padding: 0 0.5em;
	}

	@include element("no-options-available") {
		cursor: default;
		padding: $ssv-select-input-box-padding;
		background-color: $ssv-select-no-options-color;
	}

	&[disabled] {
		cursor: default;

		.ssv-select__arrow,
		.ssv-select__input-box,
		.ssv-select__label,
		.ssv-select__placeholder,
		.ssv-select__placeholder--active {
			cursor: default;
			color: $ssv-select-disabled-secondary-color;
		}

		.ssv-select__label--multi {
			background-color: $ssv-select-disabled-primary-color;
		}

		.ssv-select__input-box {
			border-bottom: 1px dotted $ssv-select-disabled-primary-color;
		}
	}

	// variants
	@include modifier("primary") {
		@include ssv-select-variant($ssv-primary-variant);
	}

	@include modifier("accent") {
		@include ssv-select-variant($ssv-accent-variant);
	}

	@include modifier("success") {
		@include ssv-select-variant($ssv-success-variant);
	}

	@include modifier("danger") {
		@include ssv-select-variant($ssv-danger-variant);
	}

	@include modifier("warn") {
		@include ssv-select-variant($ssv-warn-variant);
	}

	@include modifier("info") {
		@include ssv-select-variant($ssv-info-variant);
	}
}