// Copyright (c) Microsoft Corporation.  All Rights Reserved. Licensed under the MIT License. See License.txt in the project root for license information.
.Colors(@theme) {
    .colorDefinitions(@theme);

    // The desired visual design is to stack 3 elements on top of each other and have
    // their colors blend together by making the upper elements transparent. For example:
    // 1. NavBar Container: solid background color
    // 2. NavBar Command Button: semi-transparent background color
    // 3. NavBar Command Button Overlay (not used in actual implementation)
    //   - rest state: no background color
    //   - hover/pressed state: semi-transparent background color
    // Instead of creating an extra element just for the purpose of this color blending,
    // we get rid of element (3), blend the colors of (2) and (3) in LESS, and then apply
    // the blended color to (2).
    @navBarCommandRest: @listHover;
    @navBarCommandHover: overlay(@listHover, @listHover);
    @navBarCommandPress: overlay(@listPress, @listHover);

    .win-navbarcontainer-pageindicator {
        background-color: @baseLow;
    }
    .win-navbarcontainer-pageindicator-current {
        background-color: @baseMid;
    }

    .win-navbarcontainer-navarrow {
        background-color: @baseMediumMid;
        color: @altMediumHigh;

        &.win-navbarcontainer-navarrow:hover:active {
            background-color: @baseMediumHigh;
        }
    }

    .win-navbarcommand-button,
    .win-navbarcommand-splitbutton {
        background-color: @navBarCommandRest;
        color: @baseHigh;

        &.win-pressed {
            background-color: @navBarCommandPress;
        }
    }

    .win-navbarcommand-button.win-keyboard:focus::before {
        content: "";
        pointer-events: none;
        position: absolute;
        box-sizing: border-box;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        border: 1px dotted @baseHigh;
    }

    .win-navbarcommand-splitbutton.win-keyboard:focus::before {
        border-color: @baseHigh;
    }
}
.ColorsHover(@theme) {
    .colorDefinitions(@theme);

    .win-navbarcontainer-navarrow:hover {
        background-color: @baseMid;
    }

    .win-navbarcommand-button:hover,
    .win-navbarcommand-splitbutton:hover {
        background-color: @navBarCommandHover;

        &.win-pressed {
            background-color: @navBarCommandPress;
        }
    }
}

@media (-ms-high-contrast) {
    .win-navbarcontainer-pageindicator {
        background-color: ButtonFace;
    }
    .win-navbarcontainer-pageindicator:after {
        display: block;
        border: 1px solid ButtonText;
        content: "";
        width: ~"calc(100% - 2px)";
        height: ~"calc(100% - 2px)";
    }
    .win-navbarcontainer-pageindicator-current {
        background-color: ButtonText;
    }
    html.win-hoverable .win-navbarcontainer-pageindicator:hover {
        background-color: Highlight;
    }
    html.win-hoverable .win-navbarcontainer-pageindicator-current:hover {
        background-color: ButtonText;
    }
    .win-navbarcontainer-pageindicator:hover:active {
        background-color: ButtonText;
    }
    .win-navbarcontainer-navarrow {
        background-color: ButtonFace;
        color: ButtonText;
    }
    .win-navbarcontainer-navarrow:after {
        position: absolute;
        top: 0;
        left:0;
        border: 2px solid ButtonText;
        content: "";
        width: ~"calc(100% - 3px)";
        height: ~"calc(100% - 3px)";
    }
    html.win-hoverable .win-navbarcontainer-navarrow:hover {
        background-color: Highlight;
        color: HighlightText;
    }
    .win-navbarcontainer-navarrow:hover:active {
        background-color: ButtonText;
        color: ButtonFace;
    }

    /*
        NavBarCommand colors.
    */
    .win-navbarcommand-button,
    .win-navbarcommand-splitbutton {
        background-color: ButtonFace;
        color: ButtonText;
    }
    .win-navbarcommand-button:after,
    .win-navbarcommand-splitbutton:after {
        position: absolute;
        top: 0;
        left:0;
        border: 2px solid ButtonText;
        content: "";
        width: ~"calc(100% - 3px)";
        height: ~"calc(100% - 3px)";
        pointer-events: none;
    }
    html.win-hoverable .win-navbarcommand-button:hover,
    html.win-hoverable .win-navbarcommand-splitbutton:hover {
        background-color: Highlight;
        color: HighlightText;
    }
    .win-navbarcommand-splitbutton.win-navbarcommand-splitbutton-opened,
    html.win-hoverable .win-navbarcommand-splitbutton.win-navbarcommand-splitbutton-opened:hover,
    .win-navbarcommand-button.win-pressed,
    html.win-hoverable .win-navbarcommand-button.win-pressed:hover,
    .win-navbarcommand-splitbutton.win-pressed,
    html.win-hoverable .win-navbarcommand-splitbutton.win-pressed:hover {
        background-color: ButtonText;
        color: ButtonFace;
    }
}