/* 
 *  Created on : 06.01.2017, 00:20:27
 *  @copyright : Samet Tarim
 *  @author    : Samet Tarim
 *  @link      : http://www.samet-tarim.de/
 */

.mb-author--tabs {

    position: relative;
    overflow: hidden;
    width: 100%;
    height: 300px;
    margin: 1em auto;
    padding: 10px;
    .box-sizing();

    h1, h2, h3, h4 ,h5 ,h6 {

        margin: 0;
    }

    p {


    }

    &.border-radius-small {

        border-radius: 5px;
    }

    &.border-radius-middle {

        border-radius: 10px;
    }
    &.border-radius-large {

        border-radius: 15px;
    }

    &.shadow {

        .box-shadow(0 2px 10px rgba(0,0,0,.5));
    }

    &-tab {

        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;

        .box-sizing();

        &:nth-child(2) .mb-author--tabs-tab-label {

            margin-left: 25%;
        }

        &:nth-child(3) .mb-author--tabs-tab-label {

            margin-left: 50%;
        }

        &:nth-child(4) .mb-author--tabs-tab-label {

            margin-left: 75%;
        }

        input[type=radio] {

            display: none;
        }

        input[type*=radio]:checked + &-label {

            .transition(all .5s ease);
        }

        &-label {

            display: block;
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 50;
            width: 25%;
            height: 38px;
            padding: 5px 0;

            font-size: 1.4rem !important;
            font-weight: bold !important;
            line-height: 1.4em !important;
            text-shadow: none;
            text-align: center;
            cursor: pointer;

            .transition(all .5s ease);
            .box-sizing();

            &.left {
                
                left: 0;
            }

            &.top {
                
                top: 0;
            }
        }

        input[type*=radio]:checked ~ [class*="mb-author--tabs-tab-content"] {

            .transform(translateY(0));
            .transform(translateX(0));
            .opacity(1);
            .transition(all .5s ease);

            visibility: visible;
        }

        &-content {

            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            padding: 20px;
            z-index: 50;
            overflow-y: auto;
            overflow-x: hidden;
            height: 260px;
            max-height: 260px;

            .opacity(0);
            .transition(all .5s ease);
            .box-sizing();

            h3, h4, h5, h6 {

                margin: 0 !important;
                padding: 0;
            }

            a {

                font-size: .8rem !important;
            }

            .dashicons {

                font-size: 15px !important;
                line-height: 31px !important;
            }

            ul {
                
                margin: 0;
                padding-left: 20px;
                list-style: none;
            }

            &.left-slide {

                .transform(translateX(-300%));
            }

            &.right-slide {

                .transform(translateX(300%));
            }

            &.top-slide {

                .transform(translateY(-300%));
            }

            &.bottom-slide {

                .transform(translateY(300%));
            }

            &-scroll {

            }

            &-img {

                width: 96px;
                height: 96px;
                background-size: cover;
                background-position: center center;

                &.border-small {

                    border: 2px solid #fff;
                }

                &.border-middle {

                    border: 5px solid #fff;
                }

                &.border-big {

                    border: 10px solid #fff;
                }

                &.circle {

                    border-radius: 50%;
                }

                &.shadow {

                    .box-shadow(0 2px 10px rgba(0,0,0,.5));
                }
            }

            &-header {

                margin-bottom: .5em;
                font-size: 1.7em;
                font-weight: bold;
                text-shadow: none;

                .transition(all .5s ease);
            }

            &-description {

                font-size: 1.2rem !important;
                line-height: 26px !important;
                text-shadow: none;
                margin-top: 0;
                margin-bottom: 0;

                .transition(all .5s ease);
            }
        }
    }
}