// Tabs
.bg__viewer-tabs {
    display: flex;

    > .tab {
        cursor: pointer;
        font-size: 15px;
        font-family: $fontHeading;
        border-bottom: 5px solid transparent;
        padding: 13px 8px 10px 15px;
        transition: background-color $transition, border-color $transition;

        &:hover {
            background-color: rgba($clGreyTint, 0.25);
            border-bottom: 5px solid rgba($clPrimary, 0.5);
        }

        &.active {
            border-bottom: 5px solid $clPrimary;
            &:hover {
                background-color: transparent;
            }
        }

        &.secondary {
            &:hover {
                border-bottom: 5px solid $clSecondary;
            }

            &.active {
                border-bottom: 5px solid $clSecondary;
            }
        }
    }
}