/**
 * Import Compass and Theme Variables
 */

@import "_variables";

/* ==========================================================================
   Generic Menu Bar
   ========================================================================== */


/* ==========================================================================
   Top Menu Navigation
   ========================================================================== */

@g_Menu-BG: #FAFAFA;
@g_Menu-BG-Hover: #F7F8F9;
@g_Menu-BG-Active: #0572CE;

@g_Menu-FG: #333333;
@g_Menu-FG-Hover: #0572CE;
@g_Menu-FG-Active: #FFFFFF;
@g_Menu-FG-Active-Focus: #85BBE7;

@g_Menu-Border: #D9DFE3;

@g_Menu-SubMenuIcon-FG: #878C90;

@g_Menu-Accent: #0572CE;
@g_Menu-Focus-BG: #0572CE;




.t-Header {
  .a-MenuBar.a-MenuBar--overflow {
    //height: auto;
    display: inline-block;
    height: 34px;

    .a-MenuBar-item--overflow {
      width: 34px;
      height: 34px;
      vertical-align: top;

      & > .a-MenuBar-label {
        padding: 8px;

        .a-Icon:before {
          content: "\e123";
        }
      }
    }

    .a-MenuBar-item {
      vertical-align: top
    }
  }

  .a-MenuBar-item {
    display: inline-block;
    float: none;
    background: @g_Menu-BG;
    border: 1px solid @g_Menu-Border;
    // border-left: 1px solid @g_Menu-Border;
    margin-left: -1px;

    &:first-child {
      margin-left: 0;
      border-bottom-left-radius: 2px;
      border-top-left-radius: 2px;
    }

    &:last-child {
      border-bottom-right-radius: 2px;
      border-top-right-radius: 2px;
      margin-right: 1px;
    }
  }

  .a-MenuBar-label {
    font-weight: bold;
    color: @g_Menu-FG;
    padding: 10px 20px;
    font-size: 1.2rem;
    line-height: 1.2rem;
  }

  /* Sub Menu Drop Down */
  .a-MenuBar-item {
    & > .a-Menu-subMenuCol {
      padding: 8px 14px 8px 0;
      line-height: 16px;

      .a-Icon {
        width: 16px;
        height: 16px;
        border-width: 0;
        border-radius: 0;
        padding: 0;
        color: @g_Menu-SubMenuIcon-FG;

        &:before {
          content: "\e123";
        }
      }
    }
  }

  .a-MenuBar-item.is-focused {
    // background-color: @g_Menu-BG-Hover;
    //    background-image: linear-gradient(to bottom, #f1f3f4,#e4e8ea);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .75) inset;

    .a-MenuBar-label,
    & > .a-Menu-subMenuCol .a-Icon {
      color: @g_Menu-FG-Hover;
    }
  }


  /* Active, Active and Focused, Expanded */
  .a-MenuBar-item.a-Menu--current,
  .a-MenuBar-item.is-expanded {
    background: @g_Menu-BG-Active;
    box-shadow: none;

    .a-MenuBar-label,
    & > .a-Menu-subMenuCol .a-Icon {
      color: @g_Menu-FG-Active;
    }
  }

  .a-MenuBar-item.a-Menu--current.is-focused {
    background: @g_Menu-BG-Active;
    box-shadow: none;

    .a-MenuBar-label,
    & > .a-Menu-subMenuCol .a-Icon {
      color: @g_Menu-FG-Active-Focus !important;
    }
  }

  // /* Expanded State */
  // /* Active + Expanded State */
  // .a-MenuBar-item.is-expanded,
  // .a-MenuBar-item.a-Menu--current.is-expanded {
  //   background-color: @g_Menu-BG !important;
  // }


  // .a-MenuBar-item.a-Menu--current.is-expanded {
  //   & > .a-Menu-subMenuCol .a-Icon {
  //     background-color: @g_Menu-FG;
  //     border-color: @g_Menu-FG;
  //     color: contrast(@g_Menu-FG, darken(@g_Menu-FG,  75%), lighten(@g_Menu-FG,  75%),  43%);
  //   }
  // }

  // .a-MenuBar-item.is-expanded {
  //   & > .a-Menu-subMenuCol .a-Icon {
  //     background-color: lighten(@g_Menu-BG,47%);
  //     border-color: lighten(@g_Menu-BG,47%);
  //     color: darken(@g_Menu-BG,10%);
  //   }
  // }

  // Expanded Menu Contents
  // .a-Menu-content {
  //   border-width: 0;
  //   background-color: @g_Menu-BG;
  // }

  // .a-Menu .a-Menu-item {
  //   color: @g_Menu-FG;
  // }

  // .a-Menu .a-Menu-item.is-focused,
  // .a-Menu .a-Menu-item.is-expanded {
  //   @bg: darken(@g_Menu-BG, 15%);
  //   background-color: @bg !important;
  //   color: contrast(@bg, darken(@bg,   75%), lighten(@bg,   75%),  43%);
  // }
}


.MenuBar(@menuActiveFG, @menuBG) {
  .a-MenuBar-label {
    color: @menuActiveFG;
  }

  /* Focus + Hover State */
  .a-MenuBar-item.is-focused,
  .a-MenuBar-item:hover {
    background-color: @menuBG !important;
  }


  /* Active + Focus State */
  .a-MenuBar-item.a-Menu--current,
  .a-MenuBar-item.a-Menu--current.is-focused {
    background-color: @menuBG !important;

    .a-MenuBar-label {
      color: @menuActiveFG !important;
      font-weight: bold;
    }
  }

  /* Expanded State */
  /* Active + Expanded State */
  .a-MenuBar-item.is-expanded,
  .a-MenuBar-item.a-Menu--current.is-expanded {
    background-color: @menuBG !important;
  }

  /* Sub Menu Drop Down */
  .a-MenuBar-item {
    & > .a-Menu-subMenuCol .a-Icon {
      color: fade(@menuActiveFG, 80%);
      border-color: lighten(@menuBG, 15%);
      border-radius: 100%;
    }

    &.a-Menu--current.is-focused > .a-Menu-subMenuCol .a-Icon,
    & > .a-Menu-subMenuCol:hover .a-Icon {
      @hoverBg: contrast(@menuBG, darken(@menuBG,   0%), lighten(@menuBG,   0%),  43%);
      background-color: @hoverBg;
      border-color: @hoverBg;
      color: contrast(@hoverBg, darken(@hoverBg,   75%), lighten(@hoverBg,   75%),  43%);
    }
  }

  .a-MenuBar-item.a-Menu--current {
    & > .a-Menu-subMenuCol .a-Icon {
      color: lighten(@menuBG, 20%);
      border-color: lighten(@menuActiveFG, 20%);
    }
  }

  .a-MenuBar-item.a-Menu--current.is-expanded {
    & > .a-Menu-subMenuCol .a-Icon {
      background-color: @menuActiveFG;
      border-color: @menuActiveFG;
      color: contrast(@menuActiveFG, darken(@menuActiveFG,   75%), lighten(@menuActiveFG,   75%),  43%);
    }
  }

  .a-MenuBar-item.is-expanded {
    & > .a-Menu-subMenuCol .a-Icon {
      background-color: lighten(@menuBG, 47%);
      border-color: lighten(@menuBG, 47%);
      color: darken(@menuBG, 10%);
    }
  }

  // Expanded Menu Contents
  .a-Menu-content {
    border-width: 0;
    background-color: @menuBG;
  }

  .a-Menu .a-Menu-item {
    color: @menuActiveFG;
  }

  .a-Menu .a-Menu-item.is-focused,
  .a-Menu .a-Menu-item.is-expanded {
    @bg: darken(@menuBG, 15%);
    background-color: @bg !important;
    color: contrast(@bg, darken(@bg,   75%), lighten(@bg,   75%),  43%);
  }

  /* Menu Bar Item */
}


//.a-Menu-labelContainer {
//  background: black;
//}
.t-Body {
  .MenuBar(@g_Body-Text, @g_Body-BG);

  .a-MenuBar > ul {
    background-color: contrast(@g_Region-BG, darken(@g_Region-BG,   10%), lighten(@g_Region-BG,   10%),  43%)
  }

  .a-MenuBar-item {
    //@_border:
    border-color: contrast(@g_Body-BG, darken(@g_Body-BG,   10%), lighten(@g_Body-BG,   10%),  43%);

    &.is-focused {
      box-shadow: 0 0 0 2px contrast(@g_Body-BG, darken(@g_Body-BG,   50%), lighten(@g_Body-BG,   50%),  43%) inset;
    }
  }
}

// .t-Region {
//   .MenuBar( @g_Region-FG, @g_Region-BG );
//   .a-MenuBar > ul {
//     background-color: contrast(@g_Region-BG, darken(@g_Region-BG,  10%), lighten(@g_Region-BG,  10%),  43%)
//   }
//   .a-MenuBar-item {
//     border-color: contrast( @g_Region-BG, darken( @g_Region-BG,   10%), lighten( @g_Region-BG,   10%),  43%);
//     &.is-focused {
//       box-shadow: 0 0 0 2px contrast(@g_Region-BG, darken(@g_Region-BG,   50%), lighten(@g_Region-BG,   50%),  43%) inset;
//     }
//   }
// }


.t-Header-userMenu {
  .a-Menu-content {
    border-width: 0;
    background-color: contrast(@g_Nav-BG, darken(@g_Nav-BG,   10%), lighten(@g_Nav-BG,   10%),  43%);
  }

  .a-Menu-item.is-focused,
  .a-Menu-item.is-expanded {
    background-color: contrast(@g_Nav-BG, darken(@g_Nav-BG,   5%), lighten(@g_Nav-BG,   5%),  43%) !important;
  }

  &.a-Menu .a-Menu-item .a-Menu-label {
    color: @g_Nav-Active-FG;
  }
}