$tab-header-width: 85px !default;
$tab-header-button-height: 44px !default;
$tab-header-padding: 16px !default;
$tab-button-text-size: 14px !default;
$tab-button-text-size-padding: 8px !default;
$tab-button-text-button-height: 28px !default;
$tab-button-text-button-padding: 12px !default;

.mx{
    &-tab{
        width: 100%;
        height: 100%;
        display: flex;
        overflow-y: auto;

        &--top,
        &--bottom{
            flex-direction: column;
        }

        &--left,
        &--right{
            flex-direction: row;
        }

        &-header{
            position: relative;
            overflow: hidden;

            .mx-tab-nav{
                position: relative;
                transition: all $duration $time-function;

                &--top,
                &--bottom{
                    display: flex;
                    flex-direction: row;
                }

                &--left,
                &--right{
                    width: 85px;
                    height: 100%;
                }

                &-button{
                    height: $tab-header-button-height;
                    font-size: $tab-button-text-size;
                    text-align: center;
                    line-height: $tab-header-button-height; 
                    cursor: pointer;
                    user-select: none;

                    &--top,
                    &--bottom{
                        padding-left: $tab-button-text-size-padding;
                        padding-right: $tab-button-text-size-padding;
                        flex-grow: 1;
                        flex-shrink: 0; 
                    }

                    &--button{
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                    }

                    &-text{

                        &--text{
                            &--active{
                                font-weight: bold;
                            }
                        }

                        &--button{
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            height: $tab-button-text-button-height;
                            line-height:initial;
                            border-radius: div($tab-button-text-button-height, 2);
                            padding-left: $tab-button-text-button-padding;
                            padding-right: $tab-button-text-button-padding;

                            &-icon{
                                margin-right: 5px;
                            }
                        }
                    }
                }

                &-line{
                    position: absolute;
                    border-radius: 1px;
                    transition: all $duration $time-function;
    
                    &--top,
                    &--bottom{
                        bottom: 0;
                        left: 0;
                    }
    
                    &--left,
                    &--right{
                        top:0;
                        left: 0;
                    }
                }
            }
        }

        &-body{
            flex: 1;
            overflow: hidden;

            &--top,
            &--bottom{
                width: 100%;
            }

            &--left,
            &--right{
                height: 100%;
            }

            &-track{
                display: flex;
                flex-direction: row;
                width: 100%;
                height: 100%;
                transition: all $duration $time-function;
            }
        }
    }
}