/**
 * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
 * Copyright 2025 by Keenthemes Inc
 */

/* Base Styles */
@layer components {
	.kt-select {
		@apply cursor-pointer py-0 appearance-none flex items-center gap-2 w-full bg-background border border-input shadow-xs shadow-[rgba(0,0,0,0.05)] transition-[color,box-shadow] text-foreground placeholder:text-muted-foreground/80;
		@apply focus-visible:ring-ring/30 focus-visible:border-ring focus-visible:outline-none focus-visible:ring-[3px];
		@apply disabled:cursor-not-allowed disabled:opacity-60;
		@apply aria-invalid:border-destructive/60 aria-invalid:ring-destructive/10;

		background-repeat: no-repeat;
		background-size: 14px 11px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239f9fa9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");

		.dark & {
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239f9fa9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
		}

		&[multiple],
		&[size]:not([size='1']) {
			padding-inline-end: var(--btn-default-px);
			background-image: none;
		}

		&:-moz-focusring {
			color: transparent;
			text-shadow: none;
		}

		&.active {
			@apply ring-ring/30 border-ring outline-none ring-[3px];
		}

		&.disabled {
			@apply cursor-not-allowed opacity-60;
		}
	}

	.kt-select-label {
		@apply flex items-center truncate;
	}

	.kt-select-arrow {
		@apply ms-auto;

		svg {
			@apply size-4 text-muted-foreground;
		}
	}

	.kt-select-search {
		@apply px-4 py-1 border-b border-border;

		.kt-input {
			@apply text-sm;
		}
	}

	.kt-select-search-empty {
		@apply px-3.5 py-1 text-sm text-muted-foreground;
	}

	.kt-select-loading {
		@apply px-3.5 py-1 text-sm text-muted-foreground;
	}

	.kt-select-dropdown {
		@apply rounded-md shadow-md shadow-[rgba(0,0,0,0.05)] border border-border bg-popover text-popover-foreground;
	}

	.kt-select-select-all {
		@apply px-2 py-1 border-b border-border;
	}

	.kt-select-select-all-button {
		@apply w-full text-start p-1.5 rounded-md text-sm hover:bg-accent hover:text-accent-foreground cursor-pointer;
	}

	.kt-select-options {
		@apply p-1 space-y-0.5;
	}

	.kt-select-wrapper {
		@apply w-full min-w-0;

		&.disabled {
			@apply opacity-60 pointer-events-none;
		}
	}

	.kt-select-option {
		@apply grow flex items-center gap-2.5 py-1.75 px-2.5 rounded-md text-sm text-start cursor-pointer;
		@apply hover:bg-accent hover:text-accent-foreground;

		&[aria-disabled='true'],
		&.disabled {
			@apply opacity-60 pointer-events-none;
		}

		&.selected {
		}

		&.focused,
		&.hover,
		&.highlighted {
			@apply bg-accent text-accent-foreground;
		}
	}

	.kt-select-option-text {
		@apply overflow-ellipsis truncate;
	}

	.kt-select-group {
		@apply py-1;
	}

	.kt-select-group-header {
		@apply px-3 py-1 text-xs font-semibold text-muted-foreground uppercase;
	}

	.kt-select-placeholder {
		@apply text-muted-foreground overflow-ellipsis truncate;
	}

	/* Single select: constrain width so long selected text truncates (Asana #1212821478465094) */
	.kt-select-display:not([data-multiple='true']) {
		@apply w-full flex items-center min-w-0 overflow-hidden;
	}

	.kt-select-display:not([data-multiple='true']) .kt-select-option-text {
		@apply min-w-0 overflow-ellipsis truncate;
	}

	/* Enhanced Tag Styles */
	.kt-select-tag {
		@apply inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium;
		@apply bg-accent/10 text-accent-foreground border border-border;
		@apply max-w-[200px] truncate flex-shrink-0;
		@apply shadow-sm;
		@apply leading-tight;
	}

	.kt-select-tag-remove {
		@apply flex items-center justify-center w-5 h-5 rounded-full;
		@apply hover:bg-accent/20 text-muted-foreground hover:text-accent-foreground;
		@apply transition-all duration-200 cursor-pointer;
		@apply flex-shrink-0 opacity-100;
		@apply hover:scale-110;
	}

	.kt-select-tag-remove svg {
		@apply w-3.5 h-3.5;
		@apply transition-transform duration-200;
	}

	.kt-select-tag-remove:hover svg {
		@apply scale-110;
	}

	/* Enhanced Multi-select display container */
	.kt-select-display[data-multiple='true'] {
		@apply flex flex-wrap items-center gap-2 p-3 min-h-[3rem];
		@apply w-full;
		@apply bg-background border border-input rounded-md;
		@apply focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/20;
		@apply transition-all duration-200;
	}
}

/* Sizes */
@layer components {
	.kt-select {
		@apply h-8.5 gap-1 ps-3 pe-6 text-[0.8125rem] leading-(--text-sm--line-height) rounded-md;
		background-position: right 0.5rem center;

		&[data-multiple='true'] {
			@apply h-auto min-h-8.5 py-1.5 flex-wrap;
			background-position: right 0.5rem top 0.675rem;
		}
	}

	.kt-select-sm {
		@apply h-7 gap-1 ps-2.5 pe-5 text-xs rounded-md;
		background-position: right 0.5rem center;

		&[data-multiple='true'] {
			@apply h-auto min-h-7;
			background-position: right 0.5rem top 0.575rem;
		}
	}

	.kt-select-lg {
		@apply h-10 gap-1.5 ps-4 pe-8 py-1 text-sm rounded-md;
		background-position: right 0.6rem center;

		&[data-multiple='true'] {
			@apply h-auto min-h-10 py-2;
			background-position: right 0.6rem top 0.85rem;
		}
	}
}

/* RTL */
@layer components {
	[dir='rtl'] {
		.kt-select {
			background-position: left 0.5rem center;

			&[data-multiple='true'] {
				background-position: left 0.5rem top 0.675rem;
			}
		}

		.kt-select-sm {
			background-position: left 0.5rem center;

			&[data-multiple='true'] {
				background-position: left 0.5rem top 0.575rem;
			}
		}

		.kt-select-lg {
			background-position: left 0.75rem center;

			&[data-multiple='true'] {
				background-position: left 0.75rem top 0.85rem;
			}
		}
	}
}

/* Dark Mode Styles */
@layer components {
	.dark .kt-input {
		@apply aria-invalid:border-destructive aria-invalid:ring-destructive/20;
	}
}

/* Custom variants */
@custom-variant kt-select-option-selected {
	[data-kt-select-option].selected {
		@slot;
	}

	[data-kt-select-option].selected & {
		@slot;
	}
}

@custom-variant kt-select-option-focused {
	[data-kt-select-option].focused {
		@slot;
	}

	[data-kt-select-option].focused & {
		@slot;
	}
}

@custom-variant kt-select-option-disabled {
	[data-kt-select-option].disabled {
		@slot;
	}

	[data-kt-select-option].disabled & {
		@slot;
	}
}

@custom-variant kt-select-option-hover {
	[data-kt-select-option]:hover {
		@slot;
	}

	[data-kt-select-option]:hover & {
		@slot;
	}
}