.#{$pui}tabs {
    @include sizes;

    overflow: hidden;
    overflow-x: auto;
    white-space: nowrap;

    ul {
        display: flex;

        align-items: center;
        flex-grow: 1;
        flex-shrink: 0;
        justify-content: flex-start;

        border-bottom-width: 1px;
        border-style: solid;
        border-color: $color-border-gray;
    }

    a {
        align-items: center;
        vertical-align: top;

        display: flex;
        justify-content: center;
        margin-bottom: -1px;

        border-bottom-color: transparent;
        border-bottom-style: solid;
        border-bottom-width: 3px;

        padding: $tabs-spacing-v 0;
        margin: -1px $tabs-spacing-h;

        color: $color-dark-gray;
    }

    li {
        display: block;

        &.is-active {
            a {
                color: $color-black;
                border-color: $color-primary;
            }
        }

        &[disabled] {
            a {
                cursor: not-allowed;
                opacity: .5;
            }
        }

        &:not([disabled]):hover {
            a {
                color: $color-black;
            }
        }
    }

    @each $name, $color in $color-schema {
        &.is-#{$name} li.is-active a {
            border-color: $color;
        }
    }

    &.is-right {
        ul {
            justify-content: flex-end;
        }
    }

    &.is-centered {
        ul {
            justify-content: center;
        }
    }

    &.is-fullwidth {
        li {
            flex-grow: 1;
            flex-shrink: 0;
        }
    }

    .#{$pui}tab-content {
        width: 100%;
        padding: 1em 0;
    }

    .#{$pui}icon {
        line-height: .65em;
    } 
}