//PLEASE READ BEFORE EDITING THIS FILE
//
//This file is compiled on the BROWSER in the Workbench Visual Branding Tool
//This file is not served in the normal TG flow
//To see changes to this file reflected you can append "&configtest=1" to the URL
//
//There is a defaultCompiledCss string stored in shared.js to serve unbranded gateway
//Any updates to this file must be made to the default compiled CSS string in shared.js
//To do this launch the TG welcome page appending "&configtest=1&defaultbranding=1" to the URL
//The new compiled CSS with new line characters stripped will log shortly after page load
//Change the value of defaultCompiledCss in tgThemeBuilder section of shared.js to that string
//
//All configurable style values belong here
//ESPECIALLY COLORS
//NO static, non-configurable style values belong here including static colors which should be very rare
//Please avoid comments using /**/ in this file - use only //
//Keep this file small to keep performance manageable
//
//Color variables that are not interpolated are created in shared.js > themeBuilder tgTheme

@veryLightAccent: mix(@backgroundColor, @baseFontColor, 97%);
@lightAccent: mix(@backgroundColor, @baseFontColor, 94%); //Defect 24149 & 24156
@mediumAccent: mix(@backgroundColor, @baseFontColor, 90%);
@darkAccent: mix(@backgroundColor, @baseFontColor, 75%);
@ghostText: mix(@baseFontColor, @backgroundColor, 55%);

@foregroundTextColor: contrast(@foregroundColor, @baseFontColor, #ffffff, 47%);




.ridgeButton(@bkg, @brightness: 1) {
    border: 2px solid lighten(@bkg, @brightness);
    background-color: lighten(@bkg, @brightness);
    color: contrast(lighten(@bkg, @brightness), @baseFontColor, @backgroundColor, 33%);
}

.ridgeButtonhover(@bkg, @brightness: 1) {
    border: 2px solid darken(@bkg, @brightness);
    background-color: darken(@bkg, @brightness);
    color: contrast(darken(@bkg, @brightness), @baseFontColor, @backgroundColor, 33%);
}

.ridgeButton2ndary(@bkg, @brightness: 1) {
    border: 2px solid contrast(darken(@bkg, @brightness), @baseFontColor, lighten(@bkg, @brightness), 33%);
    background-color: lighten(@backgroundColor, @brightness);
    color: contrast(darken(@bkg, @brightness), @baseFontColor, @bkg, 33%);
}

.ridgeButton2ndaryhover(@bkg, @brightness: 1) {
    border: 2px solid contrast(darken(@bkg, @brightness), @baseFontColor, darken(@bkg, @brightness),13%);
    background-color: darken(@backgroundColor, @brightness);
    color: contrast(darken(@bkg, @brightness),@baseFontColor, @bkg, 13%);
}

.dynamicPseudobox(@size) {
    width: (@size)+4;
    height: (@size)+4;
    line-height: (@size)+4;
    font-size: (@size)+2;
}

.dynamicPseudoradio(@size) {
    width: (@size)-6;
    height: (@size)-6;
}

.dynamicheight(@size) {
    min-height: (@size*2-2);
    line-height: (@size*2-2);
}

.dynamicwidth(@size) {
    max-width: 12+(@size*18);
}

.dynamicPseudodatepicker(@size) {
    width: (@size)+20;
    height: (@size)+20;

    &:after {
        font-size: @size;
        margin: 2* @size/8;
    }
}




//Basic Color Utilities

/* remember to define focus styles! */
input,
select,
.control,
.ui-selectmenu-button,
textarea,
.pseudocheckbox,
.pseudoradio,
.controlWrapper,
.controlWrapper .controlLiner,
.textAreaWrapper,
.lightBorder,
.themed .ui-selectmenu-button,
.ui-state-default {
    border-color: @baseFontColor; //<--- Trying to go with a very rare fixed color
}

body.themed {

    input,
    select,
    .control,
    .ui-selectmenu-button,
    textarea,
    .textAreaWrapper,
    .dateWrapper,
    .controlWrapper .controlLiner,
    .themed .ui-selectmenu-button,
    .ui-state-default {
        .dynamicheight(@baseFontSize);
    }

    input[type=text], input[type=password], input[type=email],
    input[type=search]:not(.userSkill), input[type=number], input[type=password], textarea, span.ui-selectmenu-button, .elementShowHideParent,
    .controlWrapper .control, .controlLiner .control, .ui-input-search:not(.skillsControl), input[type=search].userSkill, .experienceList .inlineTextGroup {
        width: 100%;
        .dynamicwidth(@baseFontSize);
    }


    .pseudocheckbox,
    .pseudocheckbox:after,
    .pseudoradio,
    .pseudoradio:before,
    input[styled-input][type=checkbox],
    input[styled-input][type=radio] {
        .dynamicPseudobox(@baseFontSize);
    }

    .pseudoradio:after {
        .dynamicPseudoradio(@baseFontSize);
    }

    .ui-datepicker-trigger {
        .dynamicPseudodatepicker(@baseFontSize);
    }
}

.baseFontColor {
    color: @baseFontColor;
}

.baseColorPalette {
    background-color: @backgroundColor;
    .baseFontColor;
}

.accentBkg {
    background-color: @mediumAccent;
    .baseFontColor;
}

.lightAccentBkg {
    background-color: @lightAccent;
}

.veryLightAccentBkg {
    background-color: @veryLightAccent;
}

.darkAccentBkg {
    background-color: @darkAccent;
    .baseFontColor;
}

.ghostBorder {
    border-color: @ghostText;
}

.gateway.themed .accentBkg .borderInAccentBkg {
    border-color: @darkAccent;
}


.linkColorOnBkg {
    background-color: @backgroundColor;
    color: @linkColor;
    border-color: @linkColor;
    outline-color: @linkColor;
}


body, .ui-widget-content a, input, .ngdialog.ngdialog-theme-default[role="dialog"] .ngdialog-content {
    font-family: @baseFontFamily;
    font-size: @baseFontSize;
}

body, .pageHeader, button, .menu,
.dialog .region, .dialog .body, .gateway .baseColorPalette,
.ui-widget-content, .facet ul.liner, .ngdialog.ngdialog-theme-default[role="dialog"] .ngdialog-content {
    .baseColorPalette;
}

.themed .sideHeaderLine {
    &:before, &:after {
        border: 1px solid @baseFontColor;
        // Adjust height and left & right borders to make one or two lines
    }
}

.themed .splash {
    .ridgeButton(@headerBackgroundColor,0%);
    background: @headerBackgroundColor;
}

.themed .pageHeader {
    background-color: @headerBackgroundColor;
}

.themed .headerLink {
    color: @headerLinkColor;
}

.themed.pageFooter {
    background-color: @footerBackgroundColor;

    .footerLink, .tgLocale {
        border-color: #E0E0E0;
        color: @footerLinkColor;
    }

    a {
        color: @footerLinkColor;
        border-color: @footerLinkColor;
    }

    i {
        display: inline-block;
        color: @footerLinkColor;
        border-color: @footerLinkColor;
    }
}

svg.styleableColor path, svg.styleableColor rect {
    fill: @baseFontColor;
    stroke: @baseFontColor;
}

a, a:visited, .link, .gateway.themed .linkColor, .jobtitle,
.gateway .baseColorPalette a,
.gateway .baseColorPalette a:visited,
.facetFilterAccordion h3:after {
    color: @linkColor;
}

a.sidebarNav,
.gateway .sidebarOverlay .sidebar {
    background-color: @backgroundColor;
}

.backLink {
    color: @linkColor;
}

.gateway.themed {
    /*
    ****DONOT combine the placeholder styles they dont work when combined.
        shared.less has a hardcoded style for clients who have not saved VBT to refelct the changes.
        Custom Placeholder for TG Selects****
    */
    [disabled] {
        color: @ghostText;
    }
    //Custom Placeholder for TG Selects
    .controlWrapper .controlLiner .control.cue, .cue, .prompt, .typeAhead {
        color: @ghostText;
        font-style: italic;
    }
    //Traditional Browser Specific Placeholder
    input::-webkit-input-placeholder {
        color: @ghostText;
        font-style: italic;
    }

    input::-moz-placeholder {
        color: @ghostText;
        font-style: italic;
    }

    input:-ms-input-placeholder {
        color: @ghostText;
        font-style: italic;
    }

    input:-moz-placeholder {
        color: @ghostText;
        font-style: italic;
    }
}

.foreground {
    color: @foregroundTextColor;
    background-color: @foregroundColor;

    span, a, a:visited {
        color: @foregroundTextColor;
    }
}

.cardHighlight::before {
    border-right-color: @foregroundColor !important;
    border-top-color: @foregroundColor !important;
}

.textHighlight {
    color: @foregroundTextColor !important;
}

.gateway.themed .controlWrapper {
    span, a, a:visited {
        .baseFontColor;
    }
}

.themed .hover, .menu a:hover {
    .veryLightAccentBkg;
}

.ui-state-hover {
    outline-color: @baseFontColor;
}

.striped :nth-child(even), .even,
.ui-menu-item.ui-state-focus, .ui-menu-item-wrapper.ui-state-active,
.ui-datepicker .ui-state-default, .ui-widget-header {
    .darkAccentBkg;
    color: inherit;
}

.backgroundColor, .themed .down, .menu a:active, .menu a.active,
.applyFlow .layoutsection .heading:before, .themed .ngdialog.ngdialog-theme-default .ngdialog-content {
    background-color: @backgroundColor;
}
.themed .cookiedialog.ngdialog.ngdialog-theme-default .ngdialog-content {
    color: @foregroundTextColor;
    background-color: @foregroundColor;
}

.highlighted > a, .gateway.themed .selectedTile {
    .accentBkg;
}

.themed .jobdescriptionInJobDetails table {
    thead, tfoot {
        .foreground
    }

    tbody {
        &:nth-child(even) {
            .accentBkg;
        }
    }
}

.themed .primaryButton {
    .ridgeButton(@buttonBackgroundColor,0%);

    &:hover {
        .ridgeButtonhover(@buttonBackgroundColor,9.5%);
    }

    &:active {
        .ridgeButtonhover(@buttonBackgroundColor,0%);
    }

    .ladda-label, .button-label {
        outline-color: contrast(@buttonBackgroundColor, @baseFontColor, #ffffff, 47%);
    }
}

.themed button, a.button, .themed .AppDetailBtns .ui-selectmenu-button {
    .ridgeButton2ndary(@buttonBackgroundColor,0%);

    &:hover {
        .ridgeButton2ndaryhover(@buttonBackgroundColor,9.5%);
    }

    &:active {
        .ridgeButton2ndaryhover(@buttonBackgroundColor,0%);
    }

    .ladda-label, .button-label {
        outline-color: contrast(darken(@buttonBackgroundColor, 9.5%),@baseFontColor, @buttonBackgroundColor, 47%);
    }
}

.themed .closeButton,
.themed .close {
    color: @baseFontColor;

    &:hover {
        background: mix(@backgroundColor, @baseFontColor, 80%);
    }

    &:active {
        background: mix(@backgroundColor, @baseFontColor, 90%);
    }
}

.themed .clearButton {
    .baseFontColor;
}

.themed .progressBarContainer .progressBar .meter {
    background-color: @foregroundColor;
    border-color: @foregroundColor;
    border-width: 14px 0 14px 0;
    border-style: solid;
}

.themed .threeLineIcon {
    .ridgeButton(@headerBackgroundColor,0%);
}

.gateway.themed .componentHeader {
    .ridgeButton(@headerBackgroundColor,0%);
    background: @headerBackgroundColor;

    .rightIcons, .leftIcons {
        .ridgeButton(@headerBackgroundColor,0%);
    }
}

.gateway.themed .callout {
    color: @backgroundColor;
    background-color: @baseFontColor;

    &::before {
        border-color: transparent transparent @baseFontColor transparent;
    }

    &::after {
        border-color: @baseFontColor transparent transparent transparent;
    }
}

.gateway.themed .rightIcons .bellIcon .fa-stack .fa-bell {
    background-color: contrast(lighten(@headerBackgroundColor, 0%), @baseFontColor, @backgroundColor, 33%);
    color: @headerBackgroundColor;
}

.gateway.themed .rightIcons .panelShow {
    background-color: @backgroundColor;

    .fa-stack .fa-bell {
        color: contrast(lighten(@headerBackgroundColor, 0%), @baseFontColor, @backgroundColor, 33%);
        background-color: @headerBackgroundColor;
    }
}


.headerStatusSticker, .jobSavedStatus {
    &.BorderSuccess {
        background-color: @backgroundColor;
    }
}