/* Tabs */

.#{$tabs-class-name} {

    .tabs-nav {

        list-style: none;
        padding: 0em;

        li {

            line-height: $navigation-line-height;
            position: relative;
            margin: 0;

            a {
                padding: $navigation-v-padding $navigation-h-padding;
                display: block;
                border: 1px solid transparent;

                &:hover {
                    background: darken($body-background, 6%);
                }
            }

            &.active a {
                color: $text-color;
                cursor: default;
                text-decoration: none;
                background: $body-background;
                border: 1px solid $grey-20;
            }
        }

        @include pie-clearfix;
    }

    .tabs-content {
        margin-top: 1.5em;
        // overflow: auto;
    }

    // top navigation
    &.top {

        > .tabs-nav {

            border-bottom: 1px solid $grey-20;

            li {

                float: left;

                a {
                    margin-right: .4em;
                    @include border-radius(4px 4px 0 0);
                }

                &.active {
                    margin: 0 0 -2px 0;

                    a {
                        border-bottom-color: transparent;
                    }
                }
            }
        }
    }

    // bottom navigation
    &.bottom {

        > .tabs-nav {
            border-top: 1px solid $grey-20;

            li {

                float: left;

                a {
                    margin-right: .4em;
                    @include border-radius(0 0 4px 4px);
                }

                &.active {
                    margin: -2px 0 0 0;

                    a {
                        border-top-color: transparent;
                    }
                }
            }
        }
    }

    // left navigation
    &.left {

        > .tabs-nav {
            border-right: 1px solid $grey-20;
            float: left;
            margin-right: 2em;

            li {

                float: none;
                text-align: right;

                a {
                    margin-bottom: .4em;
                    @include border-radius(4px 0 0 4px);
                }

                &.active {
                    margin: 0 -2px 0 0;

                    a {
                        border-right-color: transparent;
                    }
                }
            }
        }
    }

    // right navigation
    &.right {

        > .tabs-nav {
            border-left: 1px solid $grey-20;
            float: right;
            margin-left: 2em;

            li {

                float: none;

                a {
                    margin-bottom: .4em;
                    @include border-radius(0 4px 4px 0);
                }

                &.active {
                    margin: 0 0 0 -2px;

                    a {
                        border-left-color: transparent;
                    }
                }
            }
        }
    }
}
