@use 'sass:map';

@use 'mixins/mixins' as *;
@use 'mixins/utils' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@use './fb-select-dropdown.scss';
@use './fb-option.scss';
@use './fb-option-group.scss';

@mixin mixed-input-border($color) {
	box-shadow: 0 0 0 1px $color inset;
}

@include b(select) {
	@include set-component-css-var('select', $select);
}

@include b(select) {
	display: inline-block;
	position: relative;
	vertical-align: middle;
	width: getCssVar('select-width');

	@include e(wrapper) {
		display: flex;
		align-items: center;
		position: relative;
		box-sizing: border-box;
		cursor: pointer;
		text-align: left;
		font-size: map.get($input-font-size, 'default');
		padding: map.get($select-wrapper-padding, 'default');
		gap: map.get($select-item-gap, 'default');
		min-height: map.get($input-height, 'default');
		line-height: map.get($select-item-height, 'default');
		border-radius: getCssVar('border-radius-base');
		background-color: getCssVar('fill-color', 'blank');
		transition: getCssVar('transition', 'duration');
		@include mixed-input-border(#{getCssVar('border-color')});

		&:hover {
			@include mixed-input-border(#{getCssVar('text-color')});
		}

		@include when(filterable) {
			cursor: text;
		}

		@include when(focused) {
			@include mixed-input-border(#{getCssVar('color-primary')});
		}

		@include when(hovering) {
			&:not(.is-focused) {
				@include mixed-input-border(#{getCssVar('border-color-hover')});
			}
		}

		@include when(disabled) {
			cursor: not-allowed;
			background-color: getCssVar('fill-color', 'light');
			color: getCssVar('text-color', 'placeholder');
			@include mixed-input-border(#{getCssVar('select-disabled-border')});

			&:hover {
				@include mixed-input-border(#{getCssVar('select-disabled-border')});
			}

			&.is-focus {
				@include mixed-input-border(#{getCssVar('input-focus-border-color')});
			}

			@include e(selected-item) {
				color: getCssVar('select-disabled-color');
			}

			@include e(caret) {
				cursor: not-allowed;
			}

			.#{$namespace}-tag {
				cursor: not-allowed;
			}
		}
	}

	@include e(prefix) {
		display: flex;
		align-items: center;
		flex-shrink: 0;
		gap: map.get($select-item-gap, 'default');
		color: var(#{getCssVarName('input-icon-color')}, map.get($input, 'icon-color'));
	}

	@include e(suffix) {
		display: flex;
		align-items: center;
		flex-shrink: 0;
		gap: map.get($select-item-gap, 'default');
		color: var(#{getCssVarName('input-icon-color')}, map.get($input, 'icon-color'));
	}

	@include e(caret) {
		color: getCssVar('select-input-color');
		font-size: getCssVar('select-input-font-size');
		transition: getCssVar('transition', 'duration');
		transform: rotateZ(0deg);
		cursor: pointer;

		@include when(reverse) {
			transform: rotateZ(180deg);
		}
	}

	@include e(selection) {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		flex: 1;
		min-width: 0;
		gap: map.get($select-item-gap, 'default');

		@include when(near) {
			margin-left: map.get($select-near-margin-left, 'default');
		}

		.#{$namespace}-tag {
			cursor: pointer;
			border-color: transparent;

			.#{$namespace}-tag__content {
				min-width: 0;
			}
		}
	}

	@include e(selected-item) {
		display: flex;
		flex-wrap: wrap;
		user-select: none;
	}

	@include e(tags-text) {
		display: block;
		line-height: normal;
		@include utils-ellipsis;
	}

	@include e(placeholder) {
		position: absolute;
		display: block;
		top: 50%;
		transform: translateY(-50%);
		width: 100%;
		@include utils-ellipsis;

		color: var(#{getCssVarName('input-text-color')}, map.get($input, 'text-color'));

		@include when(transparent) {
			user-select: none;
			color: getCssVar('text-color', 'placeholder');
		}
	}

	@include e(popper) {
		@include picker-popper(map.get($select-dropdown, 'bg-color'), map.get($select-dropdown, 'border'), map.get($select-dropdown, 'shadow'));
	}

	@include e(input-wrapper) {
		max-width: 100%;

		@include when(hidden) {
			// Out of the document flow
			position: absolute;
			opacity: 0;
		}
	}

	@include e(input) {
		border: none;
		outline: none;
		padding: 0;
		color: getCssVar('select-multiple-input-color');
		font-size: inherit;
		font-family: inherit;
		appearance: none;
		height: map.get($select-item-height, 'default');
		max-width: 100%;
		background-color: transparent;

		@include when(disabled) {
			cursor: not-allowed;
		}
	}

	@include e(input-calculator) {
		position: absolute;
		left: 0;
		top: 0;
		max-width: 100%;
		visibility: hidden;
		white-space: pre;
		overflow: hidden;
	}

	@each $size in (large, small) {
		@include m($size) {
			@include e(wrapper) {
				gap: map.get($select-item-gap, $size);
				padding: map.get($select-wrapper-padding, $size);
				min-height: map.get($input-height, $size);
				line-height: map.get($select-item-height, $size);
				font-size: map.get($input-font-size, $size);
			}

			@include e(selection) {
				gap: map.get($select-item-gap, $size);

				@include when(near) {
					margin-left: map.get($select-near-margin-left, $size);
				}
			}

			@include e(prefix) {
				gap: map.get($select-item-gap, $size);
			}

			@include e(suffix) {
				gap: map.get($select-item-gap, $size);
			}

			@include e(input) {
				height: map.get($select-item-height, $size);
			}
		}
	}
}