.tab {
    position: relative;
    border: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
    background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));

    @mixin hover {
        background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
    }

    @mixin smaller-than 370px {
        border-radius: 8px;
        margin: 4px;
    }

    @mixin larger-than 370px {
        &:first-of-type {
            border-radius: 8px 0 0 8px;

            @mixin rtl {
                border-radius: 0 8px 8px 0;
            }
        }

        &:last-of-type {
            border-radius: 0 8px 8px 0;

            @mixin rtl {
                border-radius: 8px 0 0 8px;
            }
        }

        & + & {
            border-left-width: 0;

            @mixin rtl {
                border-right-width: 0;
                border-left-width: 1px;
            }
        }
    }

    &[data-active] {
        z-index: 1;
        background-color: transparent;
        border: 2px solid var(--mantine-color-cyan-filled);

        @mixin hover {
            background-color: var(--mantine-color-cyan-outline-hover);
        }
    }
}

.tabLabel {
    color: var(--mantine-color-white);
    font-weight: 500;
}
