:root {
    --sc-radius: var(--mantine-radius-sm);
}

.label {
    @mixin light {
        font-weight: var(--coveo-fw-normal);
        color: var(--mantine-color-dimmed);

        @mixin hover {
            color: var(--mantine-color-text);
        }

        &[data-active] {
            color: var(--mantine-color-text);
        }

        &[data-disabled] {
            color: var(--mantine-color-disabled-color);
        }
    }
}

.root {
    border-radius: var(--mantine-radius-md);
    border: 1px solid var(--mantine-color-default-border);

    @mixin light {
        background-color: var(--mantine-color-gray-light);
    }
}

.control {
    @mixin light {
        .root[data-with-items-borders] :where(&)::before {
            background-color: var(--mantine-color-default-border);
        }
    }

    &:first-of-type {
        &::before {
            background-color: transparent;
        }
    }

    &[data-active] {
        [data-mantine-color-scheme] & {
            &,
            & + .control {
                &::before {
                    background-color: transparent;
                }
            }
        }
    }
}