@use "sass:map";
// common mixins imported from this file
@import "./../../mixins/scss/mixins";
@import "./f-select-variables";

/**
applies styles on f-select
**/

:host {
	.f-select-field {
		display: flex;
		width: 100%;
		flex-direction: column;
		&[allow-gap] {
			gap: 4px;
		}
		.f-select-options {
			position: fixed;
			z-index: 200;
			background-color: var(--color-surface-secondary);
			border-radius: 0px 0px 4px 4px;
			overflow: auto;
			width: 100%;
			box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 4px;
			@include scrollbar();
		}
		.f-select-wrapper {
			// Important :  always include base mixins
			@include base();
			display: flex;
			flex-shrink: 1;
			position: relative;
			min-height: var(--form-input-div-size);
			&[allow-gap] {
				margin-top: 4px;
			}
			cursor: pointer;
			&[searchable] {
				cursor: text;
			}

			@each $size, $value in $sizes {
				&[size="#{$size}"] {
					min-height: map.get($value, "main-height");
				}
			}

			.word-break {
				word-break: normal !important;
			}

			@each $category, $value in $categories {
				&[category^="#{$category}"] {
					background-color: map.get($value, "background");
					&:hover .f-select {
						background-color: map.get($value, "hover") !important;
					}
					&:hover {
						background-color: map.get($value, "hover") !important;
					}
				}
			}

			@each $state, $color in $states {
				&[state="#{$state}"] {
					&[variant="block"][category="fill"] {
						border-bottom: 1px solid map.get($color, "border");
						border-top: none;
						border-right: none;
						border-left: none;
						&:focus-within {
							border-bottom: 1px solid map.get($color, "focus");
							outline: none;
						}
					}
					&[variant="block"][category="transparent"] {
						border-bottom: 1px solid map.get($color, "border");
						border-top: none;
						border-right: none;
						border-left: none;
						&:focus-within {
							border-bottom: 1px solid map.get($color, "focus");
							outline: none;
						}
					}
					&[variant="block"][category="outline"] {
						border: 1px solid map.get($color, "border");
						&:focus-within {
							border-bottom: 1px solid map.get($color, "focus");
							outline: none;
						}
					}
					&[variant="curved"][category="fill"] {
						border: 1px solid map.get($color, "input");
						border-radius: var(--input-border-radius-curved);
						&:focus-within {
							border: 1px solid map.get($color, "focus");
							outline: none;
						}
					}
					&[variant="curved"][category="outline"] {
						border: 1px solid map.get($color, "border");
						border-radius: var(--input-border-radius-curved);
						&:focus-within {
							border: 1px solid map.get($color, "focus");
							outline: none;
						}
					}
					&[variant="curved"][category="transparent"] {
						border: 1px solid map.get($color, "border");
						border-radius: var(--input-border-radius-curved);
						&:focus-within {
							border: 1px solid map.get($color, "focus");
							outline: none;
						}
					}
					&[variant="round"][category="fill"] {
						border-radius: var(--input-border-radius-round);
						border: 1px solid map.get($color, "input");
						&:focus-within {
							border: 1px solid map.get($color, "focus");
							outline: none;
						}
					}
					&[variant="round"][category="outline"] {
						border-radius: var(--input-border-radius-round);
						border: 1px solid map.get($color, "border");
						&:focus-within {
							border: 1px solid map.get($color, "focus");
							outline: none;
						}
					}
					&[variant="round"][category="transparent"] {
						border-radius: var(--input-border-radius-round);
						border: 1px solid map.get($color, "border");
						&:focus-within {
							border: 1px solid map.get($color, "focus");
							outline: none;
						}
					}
				}
			}

			.f-select-prefix {
				position: relative;
				display: flex;
				padding: 0px 0px 0px 12px;
				gap: 12px;
				align-items: center;
				flex-grow: 1;
				.icon-left-padding {
					align-items: center;
					display: flex;
				}
				.f-select-searchable {
					padding: 4px 0px;
					display: flex;
					flex-direction: row;
					gap: 4px;
					flex-wrap: wrap;
					width: 100%;
					align-items: center;
				}
				.placeholder-text {
					font-style: normal;
					font-weight: 325;
					font-size: 12px;
					line-height: 18px;
					color: var(--color-text-subtle);
				}
			}

			.f-select-suffix {
				position: relative;
				padding: 0px 12px;
				display: flex;
				gap: 8px;
				align-items: center;
			}

			.loader-suffix {
				position: relative;
				display: flex;
				gap: 12px;
				@include rotate("svg");
				pointer-events: none;
				padding: 0px 12px 0px 0px;

				svg {
					position: relative;
					height: var(--form-input-loader);
					width: var(--form-input-loader);
				}
			}

			@each $size, $value in $sizes {
				&[size="#{$size}"] {
					.loader-suffix {
						svg {
							height: map.get($value, "loader");
							width: map.get($value, "loader");
						}
					}
				}
			}

			.f-select {
				@include base();
				display: flex;
				flex: 1 1 auto;
				padding: 0px 0px;
				min-height: 15px;
				font-style: normal;
				font-weight: 325;
				font-size: 12px;
				line-height: 18px;
				color: var(--color-text-default);
				color-scheme: dark;

				@each $category, $value in $categories {
					&[category^="#{$category}"] {
						background-color: map.get($value, "background");
						border: none;
						&:focus {
							outline: none;
						}
					}
				}
				border-radius: 4px;
				&[type="password"] {
					font-size: 15px;
					letter-spacing: 2px;
				}
				&::placeholder {
					/* Chrome, Firefox, Opera, Safari 10.1+ */
					font-style: normal;
					font-weight: 325;
					font-size: 12px;
					line-height: 18px;
					color: var(--color-text-subtle);
				}
				/* Chrome, Safari, Edge, Opera */
				&::-webkit-outer-spin-button,
				&::-webkit-inner-spin-button {
					-webkit-appearance: none;
					margin: 0;
				}
				/* Firefox */
				&[type="number"] {
					-moz-appearance: textfield;
				}
				&[type="date"]::-webkit-calendar-picker-indicator {
					cursor: pointer;
					border-radius: 4px;
					margin-right: 2px;
					opacity: 0.6;
					font-size: 15px;
				}

				&[type="date"]::-webkit-calendar-picker-indicator:hover {
					opacity: 1;
				}
			}
		}
	}
	div.f-select-field[disabled] {
		@include disabled();
		pointer-events: none;
		opacity: 1;
	}
	f-div.f-select-options-clickable[disabled] {
		@include disabled();
	}
}