.tabHeader {
    @include flex(row, center);
    border-bottom: 3px solid var(--c-primary);
    overflow: visible;
    padding: 0 0.75em;
    flex-shrink: 0;
    width: 100%;
}

.tabButtons {
    @include flex(row, stretch, flex-start);
    padding: 0.75em 0 0;
    margin-right: auto;

    > button {
        --bg: var(--c-background-primary);
        --color: var(--c-text-primary-accent);
        position: relative;
        background: var(--bg);
        border-radius: 0.5em 0.5em 0 0;
        padding: 0.6em 1.1em;
        z-index: 0;

        > span {
            @include font(600, 0.9em);
            color: var(--color);
        }

        &:focus {
            --bg: var(--c-background-secondary);
            box-shadow: none;
        }

        @include mq-phones {
            font-size: 0.9em;
            padding: 0.65em 1em;
        }

        @include mq-desktop {
            &:not(.active) {

                &:hover {
                    --bg: var(--c-background-secondary);
                    --color: var(--c-text-primary);
                    z-index: 4;

                    &::before,
                    &::after {
                        visibility: visible;
                    }
                }
            }
        }

        &.active {
            --bg: var(--c-primary);
            --color: var(--c-text-secondary);
            z-index: 5;
            cursor: default;

            &::before,
            &::after {
                visibility: visible;
            }

            > span {
                opacity: 1;
            }
        }

        $size: 10px;
        $smoothness: 0.5px;
        $bg-size: $size * 2;

        &::before,
        &::after {
            @include pseudo();
            @include fixed-size($size);
            background: radial-gradient(transparent $bg-size / 2 - $smoothness, var(--bg) $bg-size / 2 + $smoothness);
            background-size: $bg-size $bg-size;
            visibility: hidden;
            bottom: 0;
        }

        &::after {
            left: -$size;
            background-position: ($bg-size / 2) ($bg-size / 2);
        }

        &::before {
            right: -$size;
            background-position: -($bg-size) ($bg-size / 2);
        }
    }
}

.updateBtn {
    color: var(--c-primary);
    margin-right: 1.25em;

    bc-icon {
        @include size(1.5em);
        margin-top: 0.15em;
    }
}
