// Copyright (c) 2016-2018 VMware, Inc. All Rights Reserved.
// This software is released under MIT license.
// The full license information can be found in LICENSE in the root directory of this project.

@mixin header-section-divider() {
    display: inline-block;
    background: $clr-header-textColor;
    opacity: $clr-header-divider-opacity;
    height: $clr-header-section-divider-height;
    width: $clr-default-borderwidth;
    top: ($clr-header-height - $clr-header-section-divider-height) / 2;
}

@mixin remove-text-decoration() {
    &:hover,
    &:active {
        text-decoration: none;
    }
}

@mixin header-nav-appearance() {
    color: $clr-header-textColor;
    opacity: $clr-header-nav-opactiy;

    &:enabled:hover {
        opacity: $clr-header-nav-hover-opacity;
    }

    &:disabled {
        cursor: not-allowed;
    }
}

@mixin generate-nav-link-styles() {
    .nav-text {
        padding: 0 $clr-header-nav-text-horizontal-padding;
        font-weight: 500;
    }

    .nav-icon {
        height: $clr-header-height;
        width: $clr-header-height;
    }

    .nav-link {
        position: relative;
        display: inline-block;
        @include remove-text-decoration();
        @include header-nav-appearance();

        //TODO: Remove support for FA
        .fa,
        .nav-icon,
        .nav-text,
        &.nav-icon,
        &.nav-text {
            line-height: $clr-header-height;
        }

        //Icon fonts support
        .fa,
        .nav-icon {
            font-size: $clr-nav-icon-size;
            text-align: center;
        }

        clr-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            height: $clr-header-clarity-icons-size;
            width: $clr-header-clarity-icons-size;
        }

        //.nav-text acts like the alt attribute for screens where responsiveness kicks in.
        //on smaller screens icons are hidden and only nav-text is shown
        .nav-icon + .nav-text {
            display: none;
        }

        &.active {
            background: rgba($clr-white, 0.15);
            opacity: 1;
        }

        &.active.nav-icon,
        &.active.nav-text,
        &.active .nav-icon,
        &.active .nav-text {
            opacity: 1;
        }

        &:focus {
            outline-offset: $clr-header-outline-offset; //So that the outline styles aren't hidden becasue of the browser
        }
    }
}
