.wrapper {
    @mixin light {
        --input-disabled-color: var(--mantine-color-disabled-color);

        &[data-variant='default'] {
            --input-bd: var(--coveo-color-input-border);
        }

        &[data-disabled],
        &:read-only {
            --input-bd: var(--mantine-color-default-border);
        }
    }

    &[data-disabled] {
        > .section {
            > svg,
            > [data-combined-clear-section] > svg {
                color: var(--input-disabled-color);
            }
        }
    }

    &[data-error] {
        > .section {
            > svg,
            > [data-combined-clear-section] > svg {
                color: var(--mantine-color-error);
            }
        }
    }
}

.input {
    @mixin dark {
        --input-bg: var(--mantine-color-default);
    }

    &[data-expanded]:not([data-readonly]) ~ .section [data-plasma-combobox-chevron] {
        transform: rotate(180deg);
    }
}

.section {
    > svg,
    > [data-combined-clear-section] > svg {
        color: var(--mantine-color-dimmed);
    }
}