/**
 * Dropdown Component Styles
 * 
 * Reutilizável dropdown component styles baseado no hero-search__dropdown
 * Pode ser usado por vários outros componentes
 */

/**
 * Dropdown Container
 */
.dropdown {
    width: 100%;
}

.dropdown__field {
    position: relative;
    width: 100%;
}

/**
 * Input Wrapper
 */
.dropdown__input-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    background-color: var(--neutral-1000);
    border: 1px solid rgba(22, 13, 130, 0.12);
    border-radius: var(--radius-full);
    padding: 8px 16px;
    gap: 4px;
    color: var(--climate-scanner-roxo);
    transition: var(--transition-normal);
}

.dropdown__input-wrapper:hover {
    border-color: rgba(22, 13, 130, 0.2);
}

.dropdown__input-wrapper:focus-within {
    border-color: rgba(22, 13, 130, 0.3);
}

/**
 * Input Field
 */
.dropdown__input {
    flex: 1;
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-regular);
    font-size: var(--heading-4-small);
    line-height: 1.2;
    text-align: center;
    color: var(--climate-scanner-roxo);
    background: none;
    border: none;
    outline: none;
    padding: 0;
    max-width: calc(100% - 16px - 4px);
    cursor: pointer;
}

.dropdown__input::placeholder {
    color: var(--climate-scanner-roxo);
}

.dropdown__input[readonly] {
    cursor: pointer;
}

/**
 * Icon
 */
.dropdown__icon {
    display: flex;
    align-items: center;
    width: 16px;
    transition: var(--transition-normal);
}

.dropdown__icon img {
    width: 100%;
    height: auto;
    transition: var(--transition-normal);
}

.dropdown--active .dropdown__icon img {
    transform: rotate(180deg);
}

/**
 * Options Container
 */
.dropdown__options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--neutral-1000);
    border: 1px solid rgba(22, 13, 130, 0.12);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-bottom-large);
    max-height: 300px;
    overflow-y: auto;
    z-index: var(--z-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: var(--transition-slow);
    margin-top: 4px;
    font-weight: var(--font-weight-semibold);
    padding: 15px;
}

.dropdown__options--active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/**
 * Option Items
 */
.dropdown__item {
    /* border-bottom: 1px solid rgba(22, 13, 130, 0.08); */
}

.dropdown__item:last-child {
    border-bottom: none;
}

.dropdown__item--hidden {
    display: none;
}

.dropdown__link {
    display: block;
    padding: 13px 16px 11px;
    border-radius: var(--radius-medium);
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--body-large);
    line-height: var(--body-line-height-large);
    color: var(--neutral-200);
    text-decoration: none;
    transition: var(--transition-normal);
    cursor: pointer;
}

.dropdown__link:hover {
    background-color: var(--neutral-800);
}

.dropdown__link:focus {
    background-color: var(--accent-highlight-subtle);
    color: var(--accent-primary);
    outline: none;
}

/**
 * Scrollbar Styling
 */
.dropdown__options::-webkit-scrollbar {
    width: 6px;
}

.dropdown__options::-webkit-scrollbar-track {
    background: rgba(22, 13, 130, 0.05);
    border-radius: 3px;
}

.dropdown__options::-webkit-scrollbar-thumb {
    background: rgba(22, 13, 130, 0.2);
    border-radius: 3px;
}

.dropdown__options::-webkit-scrollbar-thumb:hover {
    background: rgba(22, 13, 130, 0.3);
}

/**
 * Responsive Design
 */
@media (max-width: 768px) {
    .dropdown__input {
        font-size: var(--heading-6-small);
    }
    .dropdown__input-wrapper {
        padding: 11px 16px;
    }
    
    /* .dropdown__link {
        font-size: var(--body-medium);
        padding: 10px 14px;
    } */
}

@media (max-width: 480px) {
    /* .dropdown__input {
        font-size: var(--body-large);
    }
    
    .dropdown__link {
        font-size: var(--body-small);
        padding: 8px 12px;
    }
    
    .dropdown__options {
        max-height: 250px;
    } */
}

/**
 * Custom Variants
 */
.dropdown--success .dropdown__input-wrapper {
    background-color: var(--success-850);
}

.dropdown--primary .dropdown__input-wrapper {
    background-color: var(--accent-primary);
    color: var(--neutral-1000);
}

.dropdown--primary .dropdown__input,
.dropdown--primary .dropdown__input::placeholder {
    color: var(--neutral-1000);
}

.dropdown--large .dropdown__input-wrapper {
    padding: 12px 20px;
}

.dropdown--large .dropdown__input {
    font-size: var(--heading-3-small);
}

.dropdown--small .dropdown__input-wrapper {
    padding: 6px 12px;
}

.dropdown--small .dropdown__input {
    font-size: var(--body-medium);
}

.dropdown--small .dropdown__link {
    padding: 8px 12px;
    font-size: var(--body-small);
}