//@import "fuse_template.less";
@import "colors.less";
//@import "fuse_template.less";
@import "../archive/customization/customer_template.less";

body:not(.reveal-body) {
  color: @siteBodyColor;
  background: @siteBodyBgColor;
}

table, .workforceBody, .jobEntry {
  color: @workforceTextColor;
}

.loginDialog{
  background-color: @loginDialogBgColor;
  .header {
    color: @loginDialogHeaderTextColor
  }
}

.employeeInfoTitle{
  color: @infoHeaderColor;
  border-bottom-color: @infoHeaderBorderColor;
}

.employee-title {
  h2 {
    color: @infoHeaderColor;
    border-bottom-color: @infoHeaderBorderColor;
  }
}

.fuse-header{
  background-color: @pageHeaderBgColor;
  color: @pageHeaderColor;
}

.subTitle {
  th {
    color: @pageHeaderColor;
    background: @pageHeaderBgColor;
  }

  td {
    color: @pageHeaderColor;
    background: @pageHeaderBgColor;
  }
}

.fuseContainer{
  .footer{
    background: @pageHeaderBgColor;
    color: @pageHeaderColor;
  }
}

.page-sidebar {
  // background-color: @sidebarBgColor;
  // color: @sidebarColor;
  .site-header {
    background: @sidebarBgColor;
    .site-logo {
      a {
        color: @sidebarColor;
      }
    }
    .site-logo-collapsed {
      a {
        color: @sidebarColor;
      }
    }
    .sidebar-collapse {
      a {
        color: @sidebarColor;
      }
    }
  }
  ul.main-menu {
    .selected {
      background-color: @sidebarItemBgColor;
      a {
        color: @sidebarItemColor;
        &:hover {
          color: @linkHoverColor;
        }
      }
    }
    li {
      &:hover {
        background-color: @sidebarItemBgHoverColor;
      }
      a {
        color: @sidebarColor;
      }
    }
  }
}

.sliding-menu.default {
  header {
    background: @sidebarBgColor;
  }
}

.dialog {
  h1,h2,h3{
    color: @textColor;
  }
}

.menu{
  color: @textColor;

  ul{
    li{
      &:hover{
        background:  @highlightColor;
        color: @highlightedTextColor;
      }
    }
  }
}

.paginationMenu {
  color: @textColor;
}

.table-pagination-menu {
  color: @textColor;
}

.paginationPageNumbers {
  color: @textColor;
}



.ui-progress {
  span{
    background-color: @highlightColor;
    color: @highlightedTextColor;
  }

  &.info {
    span {
      background-color: @textColor;
      color: @buttonTextColor;
    }
  }

  &.success {
    span {
      background-color: @successButtonColor;
      color: @buttonTextColor;
    }
  }

  &.error {
    span {
      background-color: @errorButtonColor;
      color: @buttonHoverColor;
    }
  }
}

.form-container {
  input[type="text"], input[type="password"],
  input[type="number"], input[type="email"],
  input[type="date"], input[type="color"],
  input[type="time"], input[type="datetime"] {
    &.ng-valid.ng-touched {
      border-color: @successButtonColor;
    }

    &.ng-invalid.ng-dirty {
      border-color: @errorButtonColor;
    }
  }
}

.label {
  color: @buttonTextColor;

  &.label-success {
    &.outline {
      border: 1px solid @successButtonColor;
      color: @successButtonColor;
    }
    background-color: @successButtonColor;
  }

  &.label-info {
    &.outline {
      border: 1px solid @infoButtonColor;
      color: @infoButtonColor;
    }
    background-color: @infoButtonColor;
  }

  &.label-alt-info {
    &.outline {
      border: 1px solid @altInfoButtonColor;
      color: @altInfoButtonColor;
    }
    background-color: @altInfoButtonColor;
  }

  &.label-warning {
    &.outline {
      border: 1px solid @warningButtonColor;
      color: @warningButtonColor;
    }
    background-color: @warningButtonColor;
  }

  &.label-error {
    background-color: @errorButtonColor;

    &.outline {
      border: 1px solid @errorButtonColor;
      color: @errorButtonColor;
    }
  }

  &.label-undefined {
    background-color: @undefinedButtonColor;

    &.outline {
      border: 1px solid @undefinedButtonColor;
      color: @undefinedButtonColor;
    }
  }

  &.outline {
    background-color: transparent;
  }

}

.ui-tree-folder{
  .ui-tree-handle{
    &:before{
      color: @textColor;
    }
  }
}

.ui-tree-folder-expanded{
  &>.ui-tree-handle{
    &:before {
      color: @textColor;

    }
  }
}

.ui-toolbar{
  .ui-choice{
    a{
      color: @textColor;
    }
    a:hover {
      color: @highlightColor;
    }

    li:active {
      background: @highlightColor;
    }
  }
}

.ui-choice {
  li:active {
    background: @textColor;
  }
  a:active {
    color: @highlightColor;
  }

  .active {
    background: @textColor;
  }
}

.ui-list {
  &.no-focus {
    .ui-selected {
      background:  @highlightColor;
      color: @highlightedTextColor;

      a {
        color: @highlightedTextColor;
        font-weight: bold;
      }
    }
  }

  ul {
    &:focus,&.always-focused {
      .ui-selected{
        background:  @highlightColor;
        color: @highlightedTextColor;
      }
    }
  }
}

.tabHeader{
  li.selected{
    background-color: @highlightedTextColor;
    color: @highlightColor;
  }
}

.tab-bar{
  li.selected{
    border-bottom-color: @highlightColor;
  }
}

select{
  color: @textColor;
}

.button {
  .buttonHelper( @componentLightBackground, @componentLightBorder, @textColor );

  &:hover {
    color: @highlightColor;
  }

  &:active {
    color: @buttonActiveColor;
    background-color: @highlightColor;
  }
}

.primaryButton {
  .buttonHelper( @primaryButtonColor, @primaryButtonColor, @buttonTextColor );

  &:hover {
    color: @buttonHoverColor;
  }
  &[disabled]{
    background-color: @disabledButtonColor;
    cursor: not-allowed;
    border-color: @disabledButtonColor;
  }
}

.successButton {
  .buttonHelper( @successButtonColor, @successButtonColor, @buttonTextColor );

  &:hover {
    color: @buttonHoverColor;
  }
}

.errorButton {
  .buttonHelper( @errorButtonColor, @errorButtonColor, @buttonTextColor );

  &:hover {
    color: @buttonHoverColor;
  }
}

.warningButton {
  .buttonHelper( @warningButtonColor, @warningButtonColor, @buttonTextColor );

  &:hover {
    color: @buttonHoverColor;
  }
}

.infoButton{
  .buttonHelper( @infoButtonColor, @infoButtonColor, @buttonTextColor );

  &:hover {
    color: @buttonHoverColor;
  }
}

.secondaryButton {
  .buttonHelper(@secondaryButtonStart, @secondaryButtonEnd, @buttonTextColor );

  &:hover {
    color: @buttonHoverColor;
  }
}

.buttonHelper(@backgroundColor: @componentLightBackground, @borderColor: @componentLightBorder, @btnTxtColor: @textColor ) {
  background-color: @backgroundColor;
  border-color: @borderColor;
  color: @btnTxtColor;

  &:hover {
    color: overlay(@btnTxtColor, #999999);
    background-color: overlay(@backgroundColor, #999999);
  }

  &:active {
    border-color: @borderColor;
    color: overlay( @btnTxtColor, #aaaaaa );

  }
}




.new-cs-row{
  background-color: @successButtonColor;
}

.ui-panel{
  .ui-panel-header{
    .ui-panel-toolbar{
      li{
        a{
          &:hover{
            color: @highlightColor;

            &.info {
              color: @infoButtonColor;
            }

            &.success {
              color: @successButtonColor;
            }

            &.error {
              color: @errorButtonColor;
            }

            &.warning {
              color: @warningButtonColor;
            }

            &.altInfo {
              color: @altInfoButtonColor;
            }
          }
        }
      }
    }
  }
}

.ui-nav-bar{
  &.decorated{
    ul{
      li{
        a{
          &.info {
            border-top-color: @infoButtonColor;
          }
          &.success {
            border-top-color: @successButtonColor;
          }
          &.error {
            border-top-color: @errorButtonColor;
          }
          &.warning {
            border-top-color: @warningButtonColor;
          }
          &.altInfo {
            border-top-color: @altInfoButtonColor;
          }
        }
      }
    }
  }
}
.ui-nav-bar{
  ul{
    li{
      a{
        &:hover {
          color: @highlightColor;
        }

        &:hover.info {
          background-color: @infoButtonColor;
          color: @buttonTextColor;
        }

        &:hover.success {
          background-color: @successButtonColor;
          color: @buttonTextColor;
        }

        &:hover.error {
          background-color: @errorButtonColor;
          color: @buttonTextColor;
        }

        &:hover.warning {
          background-color: @warningButtonColor;
          color: @buttonTextColor;
        }

        &:hover.altInfo {
          background-color: @altInfoButtonColor;
        }
      }
    }
  }
}

.ui-navigation-menu{
  &.mini{
    & > ul {
      li{
        .active{
          &.info {
            background-color: @infoButtonColor;
          }

          &.error {
            background-color: @errorButtonColor;
          }

          &.warning {
            background-color: @warningButtonColor;
          }

          &.success {
            background-color: @successButtonColor;
          }

          &.altInfo {
            background-color: @altInfoButtonColor;
          }
        }
      }
    }
  }
  ul{
    li{
      a{
        &.active{
          border-left-color: @infoButtonColor;

          &.info {
            border-color: @infoButtonColor;
          }

          &.error {
            border-color: @errorButtonColor;
          }

          &.warning {
            border-color: @warningButtonColor;
          }

          &.success {
            border-color: @successButtonColor;
          }

          &.altInfo {
            border-color: @altInfoButtonColor;
          }
        }
      }
    }
  }
}

button{
  &.info {
    background-color: @infoButtonColor;
  }

  &.success {
    background-color: @successButtonColor;
  }

  &.error {
    background-color: @errorButtonColor;
  }

  &.warning {
    background-color: @warningButtonColor;
  }

  &.altInfo {
    background-color: @altInfoButtonColor;
  }

  &.outline{
    &.info:hover {
      background-color: @infoButtonColor;
    }

    &.success:hover {
      background-color: @successButtonColor;
    }

    &.error:hover {
      background-color: @errorButtonColor;
    }

    &.warning:hover {
      background-color: @warningButtonColor;
    }

    &.altInfo:hover {
      background-color: @altInfoButtonColor;
    }
  }

}




.updated-cs-row{
  background-color: @errorButtonColor;
}


.navigation {
  li.selected {
    background-color: @highlightColor;
    color: @highlightedTextColor;
  }

  h1 {
    a {
      color: @highlightedTextColor;
      &:hover {
        color: @highlightColor;
      }
    }
  }
}

h3 {
  color: @highlightColor;
}


.accountMenu{
  li{
    a {
      color: @linkColor;
    }

    a:hover {
      color: @linkHoverColor;
    }
  }
}

.createNewReport {
  color: @highlightColor;
}

.ui-tree{
  &:focus{
    .ui-selected {
      background-color:  @highlightColor;
      color: @highlightedTextColor;
    }
  }
}

.warning{
  color: @highlightColor;
}

.timelineControls{
  .selected{
    background: @highlighterColor;
    border-color: @highlightColor;
  }
}

.paginationJumper{
  color: @highlighterColor;
}

.paginationArrow{
  color: @highlighterColor;
}

#analysisTree{
  .ui-tree-empty{
    &:hover {
      color: @highlighterColor;
    }
  }
}


.shadeContent{
  label{
    color: @highlighterColor;
  }
}

.timeline{
  table{
    td.selected{
      .status{
        background: @highlighterColor;
      }
    }
    td.selectedLeft {
      .status {
        background: @highlighterColor;
      }
    }

    td.selectedRight {
      .status {
        background: @highlighterColor;
      }
    }
  }
}

a{
  color: @linkColor;
}
a:hover {
  color: @linkHoverColor;
}


.workforceApplication{
  .menuBlock{
    h1{
      color: @linkColor;
    }
  }
}

.menuItemSelected{
  a{
    color: @linkColor;
  }
}

.navigation-panel{
  h2{
    color: @linkColor;
  }
}

#popoutMenu{
  a{
    color: @linkColor;
  }
}

.jobEntry{
  h3{
    color: @linkColor;
  }
}

.payroll{
  td{
    color: @linkColor;
  }
}

.infoBox{
  .title{
    color: @linkColor;

  }
}

.tab-base{
  .nav-tabs{
    background: @tabBgColor;
    >li:not(.active)>a:hover{
      background-color: @tabBgHoverColor;
    }
    >li.active>a,.nav-tabs>li.active>a:focus,.nav-tabs>li.active>a:hover {
      color: @activeTabColor;
      background-color: @activeTabBgColor;
    }
    >li a {
      color: @tabColor;
      background: @tabBgColor;
    }
  }
}

.fuse-comment{
  border-bottom-color: @commentAccentColor;
}


.password-meter {
  .meter {
    background-color: @siteBodyBgColor;

    &.meter-error {
      .guage {
        background-color: @errorButtonColor;
      }
    }

    &.meter-warning {
      .guage {
        background-color: @warningButtonColor;
      }
    }

    &.meter-info {
      .guage {
        background-color: @infoButtonColor;
      }
    }

    &.meter-success {
      .guage {
        background-color: @successButtonColor;
      }
    }

    .guage {
      background-color: @linkColor; // todo may need to externalize in customize template rules
    }
  }
}