/* Copyright (C) 2016 NooBaa */

.tabs {
    .column();

    > nav {
        .row();
        overflow-x: hidden;

        width: 100%;
        color: rgb(var(--color17));
        padding: 0 4px;

        > a {
            .no-wrap();
            position: relative;
            padding: 0 @gutter;
            line-height: 44px;
            min-width: 150px;
            text-align: center;
            cursor: @cursor-pointer;


            &:before, &:after {
                content: '';
                position: absolute;
                height: 2px;
                left: 1px;
                right: 1px;
                bottom: 4px;
            }

            &:before {
                background-color: rgb(var(--color17));
            }

            &::after {
                left: 51%;
                right: 51%;
                background-color: rgb(var(--color20));
                transition: 300ms;
            }

            &.selected {
                color: rgb(var(--color20));

                &::after {
                    left: 1px;
                    right: 1px;
                }
            }

            &:focus:not(:active):not(.selected) {
                background: rgba(var(--color17), .1);
                box-shadow: 0px 0px 4px rgba(var(--color17), .1);
            }
        }
    }

    > .tabs-row {
        .row();
        .greedy();
        position: relative;
        background-color: rgb(var(--color01));
        overflow-x: hidden;
        overflow-y: auto;

        > .tab {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            transform: translateX(-100%);
            opacity: 0;
            overflow: hidden;
            transition: all 500ms;

            &.selected {
                left: 0;
                opacity: 1;
                overflow: auto;
                transform: unset;

                ~ .tab {
                    transform: translateX(100%);
                    opacity: 0;
                }
            }
        }
    }
}
