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

.input {
    color: var(--theme-colors-surface-foreground);
    background: var(--theme-colors-surface);
    border: 1px solid transparent;

    &.clearable {
        padding-right: 4rem;
    }
}

.section {
    color: var(--theme-colors-foreground-muted);
}

.required {
    color: var(--theme-colors-state-error);
}

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

.description {
    margin-bottom: var(--theme-spacing-xs);
    font-size: var(--theme-font-size-xs);
    color: var(--theme-colors-foreground-muted);
}

.clear-button {
    color: var(--theme-colors-foreground) !important;
    background: transparent !important;

    &:hover,
    &:active,
    &:focus-visible {
        @mixin dark {
            background-color: lighten(var(--theme-colors-background), 10%) !important;
        }

        @mixin light {
            background-color: darken(var(--theme-colors-background), 5%) !important;
        }
    }
}
