.root {
    --tab-active-border-width: calc(3px - var(--tabs-list-border-width));
    --tab-box-shadow: 0 calc(-1 * var(--tab-active-border-width));

    &[data-inverted] {
        --tab-box-shadow: 0 var(--tab-active-border-width);
    }

    &[data-orientation='vertical'] {
        --tab-box-shadow: calc(-1 * var(--tab-active-border-width)) 0;
    }

    &[data-placement='right'] {
        --tab-box-shadow: var(--tab-active-border-width) 0;
    }

    &[data-variant='default'] {
        --tabs-list-border-width: 1px;
    }

    @mixin light {
        --tab-border-color: var(--mantine-color-default-border);

        &[data-variant='default'] {
            --tab-hover-color: var(--mantine-color-default-hover);
        }
    }
}

.tab {
    font-weight: var(--coveo-fw-bold);
    line-height: 16px;
    color: var(--mantine-color-dimmed);
    padding: 12px;

    &:not(:disabled, [data-disabled]) {
        @mixin hover {
            color: var(--mantine-color-text);
        }
    }

    &:where(:disabled, [data-disabled]) {
        opacity: 1 !important; /* Override Mantine's 0.5 */
        color: var(--mantine-color-disabled-color);
    }

    &:where([data-active]) {
        color: var(--mantine-color-text);
        box-shadow: inset var(--tab-box-shadow) var(--tabs-color);
    }
}

.list {
    &[data-variant='default']::before {
        border-width: var(--tabs-list-border-size);
    }
}