.root {
    & [data-disabled='true'] {
        opacity: 0.6;
    }
}

.label {
    margin-bottom: var(--theme-spacing-sm);
}

.dropdown {
    padding: var(--theme-spacing-xs);
    color: var(--theme-colors-surface-foreground);
    background: var(--theme-colors-surface);
    border: 1px solid var(--theme-colors-border);
}

.input {
    width: 100%;
    border: 1px solid transparent;

    &[data-variant='default'] {
        color: var(--theme-colors-surface-foreground);
        background: var(--theme-colors-surface);
    }

    &[data-variant='filled'] {
        color: var(--theme-colors-foreground);
        background: var(--theme-colors-background);
    }
}

.input:focus,
.input:focus-visible {
    border-color: lighten(var(--theme-colors-border), 10%);
}

.option {
    position: relative;
    padding: var(--theme-spacing-sm) var(--theme-spacing-md);

    &[data-checked='true'] {
        &::before {
            position: absolute;
            top: 50%;
            left: 2px;
            width: 2px;
            height: 50%;
            content: '';
            background-color: var(--theme-colors-primary-filled);
            border-radius: var(--theme-radius-xl);
            transform: translateY(-50%);
        }
    }
}

.option:hover {
    background: lighten(var(--theme-colors-surface), 5%);
}

.pill {
    font-size: var(--theme-font-size-sm);
    background: var(--theme-colors-background);
    border-radius: var(--theme-radius-sm);
}

.pills-list {
    padding-right: var(--theme-spacing-lg);
}

.clear-button {
    background: transparent !important;
}