@mixin dc-tab__element--active-color($dc-tab-active-color: $dc-tab-color) {
    color: $dc-tab-active-color;
}

@mixin dc-tab {
    @include dc-cf;

    display: block;
    margin: 0;
    padding: 0;
    background-color: $dc-white;
    list-style: none;
    box-shadow: $dc-box-shadow100;
}

@mixin dc-tab--vertical {
    display: flex;
    flex-direction: column;
}

@mixin dc-tab__element {
    display: block;
    padding: $dc-space100;
    float: left;
    cursor: pointer;

    &:hover {
        @include dc-tab__element--active-color;
    }
}

@mixin dc-tab__element--vertical(
    $tab-active-selector: dc-tab__element--active
) {

    &.#{$tab-active-selector} {
        @include dc-tab__element--vertical--active;
    }
}

@mixin dc-tab__element--active($dc-tab-active-color: $dc-tab-color) {
    @include dc-tab__element--active-color;
    box-shadow: inset 0 -3px 0 0 $dc-tab-active-color;
}

@mixin dc-tab__element--vertical--active($dc-tab-active-color: $dc-tab-color) {
    box-shadow: inset 3px 0 0 0 $dc-tab-active-color;
}


@mixin dc-tab__element--disabled {
    color: $dc-gray70;
    cursor: default;

    &:hover {
        background: transparent;
        color: $dc-gray70;
    }
}

@mixin dc-tab__element--header {
    color: $dc-black;
    font-weight: $dc-bold-font-weight;
    cursor: default;

    &:hover {
        background: transparent;
        color: $dc-black;
    }
}


@mixin dc-tab-selectors {
    .dc-tab {
        @include dc-tab;
    }

    .dc-tab__element {
        @include dc-tab__element;
    }

    .dc-tab__element--header {
        @include  dc-tab__element--header;
    }

    .dc-tab__element--active {
        @include dc-tab__element--active;
    }

    .dc-tab__element--disabled {
        @include dc-tab__element--disabled;
    }

    .dc-tab--vertical {
        &.dc-tab {
            @include dc-tab--vertical;
        }

        .dc-tab__element {
            @include dc-tab__element--vertical;
        }
    }
}