.atom-tabs {
    position: relative;
    background: $background;
    width: 100%;
    border-bottom: 1px solid $lightest;
    &--more-in-left {
        &:before {
            pointer-events: none;
            content: '';
            height: 100%;
            width: 50px;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 3;
            background: linear-gradient(to right, rgba(#fff, 1), rgba($primary, 0));
        }
    }
    &--more-in-right {
        &:after {
            pointer-events: none;
            content: '';
            height: 100%;
            width: 50px;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 3;
            background: linear-gradient(to left, rgba(#fff, 1), rgba($primary, 0));
        }
    }

    &__state-bar {
        position: absolute;
        z-index: 2;
        bottom: 0;
        left: 0;
        width: 100%;

        .indicator {
            transition-duration: $duration;
            transition-timing-function: ease-in-out;
            width: 0;
            height: 2px;
            text-align: center;
            background: $primary;
        }
    }
}