tabs.scss

div.clear
{
    clear: both;
    visibility: hidden;
}

// Common styles for both tab sets
#tabs {
    line-height: 20px;
    float: none;
    flex: 0 1 auto;
    margin: 0;


    ul, li {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    li { float: left; }
    a {
        color: var(--black);
    }
}

// Main tab set with the tabs sitting on top of the main content
#tabs {
    padding-left: 0;

    span { padding: 0; }
    .quiet img { opacity: 0.25; }

    li {
        margin: 0 8px;
        &:first-child {
            margin-left: 0;
        }
        &:last-child {
            border-right: none;
            margin-right: 0;
        }
        &.current {
            color: var(--base-color);
        }
        &:hover {
            color: var(--base-color);
            padding-top: 0;
        }

        &.current {
            padding-top: 0;
            line-height: 25px;
            a, span.quiet {
                color: var(--base-color);
            }
        }
    }
    a, span.quiet {
        color: var(--black);
        float: left;
        display: block;

        padding: 5px 8px;
        white-space: nowrap;
    }
}

.tab-icon {
    float: left;
    margin: 4px 5px 0 -0.5em;
    @include size(16px, 16px);
    display: none;
}

.tab-subnav {
    float: right;

    .action-menu-icon {
        position: relative;
        top: -5px;
        height: 14px;

        img {
            vertical-align: middle;
            filter: hue-rotate(350deg) saturate(8.7%) brightness(177.3%);
        }
    }


    .action-menu-content {
        z-index: 1000;
        position: absolute;
        top: inherit;
        right: inherit;
        padding: 0 0 10px 0;
        margin-top: 10px;
        background: var(--content-color-20);
        box-shadow: 1px 1px 1px var(--dark-gray-color-60);
        text-align: left;
        white-space: nowrap;

        ul {
            display: flex;
            flex-direction: column;
        }

        a:hover {
            color: var(--red) !important;
        }

    }

    .action-menu-content:before,
    .action-menu-content:after {
        bottom: 100%;
        left: 11px;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .action-menu-content:before {
        border-color: rgba(194, 225, 245, 0);
        border-bottom-color: var(--dark-gray-color-60);
        border-width: 9px;
        margin-left: -8px;
    }
    .action-menu-content:after {
        border-color: rgba(194, 225, 245, 0);
        border-bottom-color: var(--content-color-20);
        border-width: 8px;
        margin-left: -8px;
    }
}