// 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);

    //
    // Body
    //
    .bodyStyle(@theme) {
        .colorDefinitions(@theme);
        background-color: @altHigh;
        color: @baseHigh;
    }

    body {
        .bodyStyle(@theme);
    }

    // These classes reverse the colors on the subtree to which they are applied.
    // Ensure that the opposite color scheme always comes after the rule that is for the current color scheme.
    // This ensures that an author using <div class="win-ui-dark win-ui-light"> will always get the rule for the
    // inverted scheme to match last and win.
    & when (@theme = dark) {
        .win-ui-dark { .bodyStyle(dark); }
        .win-ui-light { .bodyStyle(light); }

        // Theme detection
        winjs-themedetection-tag {
            opacity: 0;
        }
    }
    & when (@theme = light) {
        .win-ui-light { .bodyStyle(light); }
        .win-ui-dark { .bodyStyle(dark); }
    }

    //
    // Text selection
    //
    ::selection {
        color: #fff;
    }

    //
    // Link
    //
    .win-link {
        &:hover {
            color: @baseMid;
        }

        &:active {
            color: @baseMediumMid;
        }

        &[disabled] {
            color: @baseLow;
        }
    }

    //
    // Radio and Checkbox
    //
    .win-checkbox {
        &::-ms-check {
            color: @baseHigh;
            border-color: @baseMediumHigh;
            background-color: transparent;
        }

        &:indeterminate::-ms-check {
            color: @baseMediumHigh;
        }

        &:checked::-ms-check {
            color: #fff;
            border-color: transparent;
        }

        &:hover::-ms-check {
            border-color: @baseHigh;
        }

        &:hover:indeterminate::-ms-check {
            color: @baseHigh;
        }

        &:active::-ms-check {
            border-color: transparent;
            background-color: @baseMid;
        }

        &:indeterminate:active::-ms-check {
            color: @baseMid;
            border-color: @baseMediumHigh;
            background-color: transparent;
        }

        &:disabled::-ms-check, &:indeterminate:disabled::-ms-check {
            color: @baseLow;
            border-color: @baseLow;
            background-color: transparent;
        }
    }

    .win-radio {
        &::-ms-check {
            color: @baseMediumHigh;
            border-color: @baseMediumHigh;
            background-color: transparent;
        }

        &:hover::-ms-check {
            border-color: @baseHigh;
        }

        &:hover::-ms-check {
            color: @baseHigh;
        }

        &:active::-ms-check {
            color: @baseMid;
            border-color: @baseMid;
        }

        &:disabled::-ms-check {
            color: @baseLow;
            border-color: @baseLow;
        }
    }

    //
    // Progress
    //
    .win-progress-bar,
    .win-progress-ring,
    .win-ring, {
      // Main colors

      // Only style background color in determinate mode to leave
      // indeterminate background transparent and preserve firefox's
      // default animation
      &:not(:indeterminate) {
        background-color: @baseLow;
      }

      // This is a weird webkit issue where the background color
      // of the progress seems to overlay with this background color,
      // but neither one on its own seems to work correctly. Really we just
      // want the regular progress bg color, but it doesn't seem to take it
      // unless we specify some color here.
      &::-webkit-progress-bar {
        background-color: transparent;
      }
    }

    .win-progress-ring,
    .win-ring, {
        background-color: transparent;
    }

    //
    // Push button
    //
    .win-button {
        color: @baseHigh;
        background-color: @baseLow;
        border-color: transparent;

        &.win-button-primary {
            color: #fff;
        }

        &:hover,
        &.win-button-primary:hover {
            border-color: @baseMediumMid;
        }

        &:active,
        &.win-button-primary:active {
            background-color: @baseMediumMid;
        }

        &:disabled,
        &.win-button-primary:disabled {
            color: @baseLow;
            background-color: @baseLow;
            border-color: transparent;
        }
    }

    //
    // Select
    //
    .win-dropdown {
        color: @baseHigh;
        background-color: @baseLow;
        border-color: @baseMediumMid;

        &::-ms-expand {
            color: @baseMediumHigh;
            background-color: transparent;
        }

        &:hover {
            background-color: @chromeMediumMid;
            border-color: @baseMid;
        }

        &:disabled {
            color: @baseLow;
            background-color: @baseLow;
        }
        &:disabled::-ms-expand {
            color: @baseLow;
            border-color: @baseLow;
        }
    }

    .win-dropdown option {
        color: @baseHigh;
        background-color: @chromeMediumMid;

        &:checked {
            color: @baseWhite;
        }
        &:hover, &:active {
            background-color: fade(@baseBlack, 20%);
            color: @baseHigh;
        }
    }

    .win-dropdown optgroup {
        color: @baseHigh;
        background-color: @chromeMediumMid;
    }
    .win-dropdown optgroup:disabled {
        color: @baseLow;
    }

    select[multiple].win-dropdown {
        border: none;
        background-color: @chromeMediumMid;

        option {
            color: @baseHigh;
        }
        option:hover {
            color: @baseHigh;
        }
        option:checked {
            color: @baseWhite;
        }
    }

    //
    // Slider
    //
    .win-slider {
        background-color: transparent;

        .thumbHover() {
            background: @sliderThumbHover;
        }
        .thumbActive() {
            background: @chromeHigh;
        }
        .thumbDisabled() {
            background: @sliderThumbDisabled;
        }
        .upperFill() {
            background: @baseMediumMid;
        }
        .fillDisabled() {
            background: @baseLow;
        }

        // We can't use :extend() to shrink the CSS output here since rules with
        // mixed browser pseudo selectors will get thrown out

        // Thumb
        &:hover::-ms-thumb {.thumbHover();}
        &:hover::-webkit-slider-thumb {.thumbHover();}
        &:hover::-moz-range-thumb {.thumbHover();}
        &:active::-ms-thumb {.thumbActive();}
        &:active::-webkit-slider-thumb {.thumbActive();}
        &:active::-moz-range-thumb {.thumbActive();}
        &:disabled::-ms-thumb {.thumbDisabled();}
        &:disabled::-webkit-slider-thumb {.thumbDisabled();}
        &:disabled::-moz-range-thumb {.thumbDisabled();}

        // Lower fill (only supported in IE)
        &:disabled::-ms-fill-lower {.fillDisabled();}

        // Upper fill / track
        &::-ms-fill-upper {.upperFill();}
        &::-webkit-slider-runnable-track {.upperFill();}
        &::-moz-range-track {.upperFill();}
        &:active::-ms-fill-upper {.upperFill();}
        &:active::-webkit-slider-runnable-track {.upperFill();}
        &:active::-moz-range-track {.upperFill();}
        &:disabled::-ms-fill-upper {.fillDisabled();}
        &:disabled::-webkit-slider-runnable-track {.fillDisabled();}
        &:disabled::-moz-range-track {.fillDisabled();}

        // IE specific stuff
        &::-ms-track {
            color: transparent;
            background-color: transparent;
        }
        &::-ms-ticks-before, &::-ms-ticks-after {
            color: @baseMediumMid;
        }
    }

    //
    // Text box
    //
    .win-textbox,
    .win-textarea {
        color: @baseHigh;
        background-color: @altMediumMid;
        border-color: @baseMediumMid;

        // Hint text color
        // Single colon on -ms not a typo
        &:-ms-input-placeholder {color: @baseMid;}
        &::-webkit-input-placeholder {color: @baseMid;}
        &::-moz-input-placeholder {color: @baseMid;}

        &:hover {
            background-color: @altMid;
            border-color: @baseMid;
        }

        &:focus {
            color: @baseBlack;
            background-color: @baseWhite;
        }
    }

    //
    // Clear/Reveal buttons
    //
    .win-textbox::-ms-clear,
    .win-textbox::-ms-reveal {
        display: block;
        color: fade(@baseBlack, 60%); // Equivalent to altMid in dark and baseMid in light

        &:active {
            color: @baseWhite;
        }
    }

    .win-xbox :focus {
        outline: 2px solid white;
    }
}

.HighContrast() {
    //
    // Text selection
    //
    ::selection {
        background-color: Highlight;
        color: HighlightText;
    }
    
    //
    // Link
    //
    .win-link {
        color: -ms-hotlight;
        
        &:active {
            color: Highlight;
        }
        
        &[disabled] {
            color: GrayText;
        }
    }
    
    //
    // Radio and Checkbox
    //
    .win-checkbox,
    .win-radio {
        &::-ms-check {
            background-color: ButtonFace;
            border-color: ButtonText;
            color: HighlightText;
        }
        
        &:indeterminate::-ms-check {
            background-color: Highlight;
            border-color: ButtonText;
            color: ButtonText;
        }
        &:checked::-ms-check {
            background-color: Highlight;
            border-color: HighlightText;
        }
        
        &:hover::-ms-check {
            border-color: Highlight;
        }
        
        &:hover:active::-ms-check,
        &:-ms-keyboard-active::-ms-check {
            border-color: Highlight;
        }
        
        &:disabled::-ms-check,
        &:disabled:active::-ms-check {
            background-color: ButtonFace;
            border-color: GrayText;
            color: GrayText;
        }
    }
    
    //
    // Progress
    //
    .win-progress-bar,
    .win-progress-ring,
    .win-ring, {
        background-color: ButtonFace;
        color: Highlight;
        
        &::-ms-fill {
            background-color: Highlight;
        }
        &.win-paused:not(:indeterminate)::-ms-fill {
            background-color: GrayText;
        }
        &.win-paused:not(:indeterminate) {
            // Override animation and opacity changes from non-highcontrast styles
            animation-name: none;
            opacity: 1.0;
        }
    }
    
    //
    // Push button
    //
    .win-button {
        border-color: ButtonText;
        color: ButtonText;
        
        &:hover {
            border-color: Highlight;
            color: Highlight;
        }
        &:active {
            border-color: Highlight;
            color: Highlight;
        }
        &:disabled {
            border-color: GrayText;
            color: GrayText;
        }
    }
    
    //
    // Select
    //
    .win-dropdown {
        background-color: ButtonFace;
        border-color: ButtonText;
        color: WindowText;
        
        &:hover {
            border-color: Highlight;
        }
        &:active {
            border-color: Highlight;
        }
        &:disabled {
            border-color: GrayText;
            color: GrayText;
        }
        
        &::-ms-expand {
            color: ButtonText;
        }
        &:disabled::-ms-expand {
            color: GrayText;
        }
        
        option {
            background-color: ButtonFace;
            color: ButtonText;
            
            &:hover,
            &:active,
            &:checked {
                background-color: Highlight;
                color: HighlightText;
            }
            &:disabled {
                background-color: ButtonFace;
                color: GrayText;
            }
        }
    }
    select[multiple].win-dropdown {
        border: none;
        
        &:disabled option {
            background-color: ButtonFace;
            color: GrayText;
            
            &:checked {
                background-color: GrayText;
                color: ButtonFace;
            }
        }
    }
    
    //
    // Slider
    //
    .win-slider {
        &::-ms-track {
            color: transparent;
        }
        
        &::-ms-ticks-before,
        &::-ms-ticks-after {
            color: ButtonText;
        }
        
        &::-ms-fill-lower {
            background-color: Highlight;
        }
        &::-ms-fill-upper {
            background-color: ButtonText;
        }
        
        &::-ms-thumb {
            background-color: ButtonText;
        }
        &:hover::-ms-thumb {
            background-color: Highlight;
        }
        &:active::-ms-thumb {
            background-color: Highlight;
        }
        
        &:disabled::-ms-fill-lower,
        &:disabled::-ms-fill-upper,
        &:disabled::-ms-thumb {
            background-color: GrayText;
        }
    }
    
    //
    // Text box
    //
    .win-textbox,
    .win-textarea {
        border-color: ButtonText;
        color: ButtonText;
        
        &:hover,
        &:active,
        &:focus {
            border-color: Highlight;
        }
        &:disabled {
            border-color: GrayText;
            color: GrayText;
        }
        
        // Hint text color
        //
        
        .placeholderText() {
            color: WindowText;
        }
        .placeholderTextDisabled() {
            color: GrayText;
        }
        
        // :-ms-input-placeholder (single colon) for IE
        // ::-ms-input-placeholder (double colon) for Edge
        &:-ms-input-placeholder { .placeholderText(); }
        &::-ms-input-placeholder { .placeholderText(); }
        &:disabled:-ms-input-placeholder { .placeholderTextDisabled(); }
        &:disabled::-ms-input-placeholder { .placeholderTextDisabled(); }
    }
    
    //
    // Clear/Reveal buttons
    //
    .win-textbox::-ms-clear,
    .win-textbox::-ms-reveal {
        background-color: ButtonFace;
        color: ButtonText;
        
        &:hover {
            color: Highlight;
        }
        &:active {
            background-color: Highlight;
            color: HighlightText;
        }
    }
}