// Tab bar
@mixin tab--bar {

    .tab__block  {
        display: table;
        width: 100%;
    }

        .tab__block__item,
        .tab__button__item {}

        .tab__text__item,
        .tab__block__item,
        .tab__button__item {
            display: table-cell;
            vertical-align: bottom;
            height: 100%;
            text-align: center;
        }

            .tab__block__link,
            .tab__button__element {
                display: block;
            }

    .tab__content {}

}

// Tab inline
@mixin tab--inline {

    .tab__block  {
        @include clearfix;
    }

        .tab__text__item,
        .tab__block__item,
        .tab__button__item {
             display: inline-block;
        }

}

// Tab reverse
@mixin tab--reverse {

    .tab__block  {
        text-align: right;
    }

    .tab__content {
        clear: both;
    }

}

// Tab stacked
@mixin tab--stacked {
    display: table;
    table-layout: fixed;
    width: 100%;

    .tab__block,
    .tab__content  {
        display: table-cell;
        position: relative;
    }

        .tab__block__item,
        .tab__button__item {}

            .tab__block__link,
            .tab__button__element {
                display: block;
            }

}


@if $styles-tab == true {

    /*------------------------------------*\
        #TAB-PENGUIN
    \*------------------------------------*/

    .tab {}

        .tab__block {}

            .tab__block__item,
            .tab__button__item {
                position: relative;
            }

                .tab__block__link,
                .tab__button__element {
                    text-decoration: none;
                    line-height: normal;
                    display: inline-block;

                    .tab__block__item--selected & {
                        cursor: not-allowed;
                        cursor: default;
                    }

                }

            .tab__text__item {
                text-decoration: none;
                line-height: normal;
                display: inline-block;
            }


        .tab__content {}

            .tab__content__item {
                display: none;
            }

            .tab__content__item--selected {
                display: block;
            }

    @if $styles-tab-bar == true {

        /**
         * Tab bar
         */

        .tab--bar {
            @include tab--bar;
        }

    }

    @if $styles-tab-inline == true {

        /**
         * Tab inline
         */

        .tab--inline {
            @include tab--inline;
        }

    }

    @if $styles-tab-reverse == true {

        /**
         * Tab reverse
         */

        .tab--reverse {
            @include tab--reverse;
        }

    }

    @if $styles-tab-stacked == true {

        /**
         * Tab stacked
         */

        .tab--stacked {
            @include tab--stacked;
        }

    }

}
