/**
 * Import Compass and Theme Variables
 */

@import "_variables";

/******************************************************************************
Button for Theme
******************************************************************************/

/* Generic Button
 ========================================================================== */
.t-Button,
.a-Button,
.ui-button {
  border: none;
  text-shadow: none;
  border-radius: @g_Button-BorderRadius;
  transition: background-color .2s ease, box-shadow .2s ease, color .2s ease;
  .t-Icon {
    transition: inherit;
  }
  &:hover,
  &:focus {
    z-index: 100;
    outline: none !important;
  }
  &:focus,
  &.is-active:focus {
    // box-shadow: 0 0 0 1px @g_Focus inset !important;
    &:before {
      box-shadow: 0 0 0 1px @g_Focus inset !important;
      opacity: 1;
    }
    &:active:before {
      opacity: 0;
    }
  }
}
.t-Button {
  &:not(.t-Button--link):not(.t-Button--header):active,
  &:not(.t-Button--link):not(.t-Button--header).is-active {
    box-shadow: 0 0 0 1px rgba(0,0,0,0.15) inset, 0 2px 2px rgba(0,0,0,0.1) inset !important;
  }
}

/* Fast Shadows for Buttons
   ========================================================================== */
.a-Button,
.t-Button,
.ui-button {
  &:before,
  &:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    opacity: 0;
    transition: .2s ease;
  }
  &:before {
    z-index: 1;
  }
  &:after {
    z-index: -1;
    box-shadow: 0 2px 1px rgba(0,0,0,.075);
    transform: translateY(-2px);
  }
  &:focus:after,
  &:not(.t-Button--link):hover:after {
    opacity: 1;
    transform: translateY(0);
  }
  &:focus:active:after {
    opacity: 0;
    transform: translateY(-2px);
  }
  &:focus:after {
    transform: translateY(0);
    box-shadow: 0 0   1px 1px fade(@g_Focus,25%);
  }
}

/* ==========================================================================
   Standard Buttons
   ========================================================================== */

/* Standard Button - Normal State
   ========================================================================== */
.t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc input + label,
.apex-button-group input + label,
.t-Button:not(.t-Button--simple),
.ui-button,
.a-Button {
  color: @g_Button-Text;
  background-color: @g_Button-BG;
  box-shadow: 0 0 0 1px rgba(0,0,0,.125) inset;
  &:hover {
    background-color: lighten(@g_Button-BG, 10%);
    box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;
  }
  &:focus {
    background-color: lighten(@g_Button-BG, 15%);
  }
  &.is-active,
  &:active {
    background-color: darken(@g_Button-BG, 10%);
  }
}

.t-Form-fieldContainer--radioButtonGroup .apex-item-grid {
  background-color: darken(@g_Button-BG,12.5%);
  border-radius: @g_Button-BorderRadius;
}


.t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc input:active + label,
.t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc input:focus:not(:checked) + label,
.apex-button-group input:active + label,
.apex-button-group input:focus:not(:checked) + label {
  box-shadow: 0 0 0 1px @g_Focus inset, 0 0 0 2px @g_Form-Item-BG inset !important;
  outline: none;
  border-color: @g_Focus;
  background-color: lighten(@g_Button-BG, 10%) !important;
  color: @g_Button-Text !important;
}

.t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc input:checked:focus + label,
.apex-button-group input:checked:focus + label {
  box-shadow: 0 0 0 1px @g_Focus inset, 0 0 0 2px @g_Form-Item-BG inset !important;
}

.t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc input:checked + label,
.apex-button-group input:checked + label {
  // background-color: darken(@g_Button-BG, 10%);
  // color: @g_Button-Text;
  border-color: @g_Focus;
  background-color: @g_Focus;
  color: @g_Form-Item-BG;
  box-shadow: none;
}

/* Standard Button - Hot State
 ========================================================================== */
.a-Button--hot,
.t-Button--hot:not(.t-Button--simple),
body .ui-button.ui-button--hot,
body .ui-state-default.ui-priority-primary {
  background-color: @l_Button-Hot-BG;
  color: @l_Button-Hot-Text;
  &:hover,
  &:not(:active):focus {
    background-color: lighten(@l_Button-Hot-BG,5%);
  }
  &:active,
  &.is-active {
    background-color: darken(@l_Button-Hot-BG,5%);
  }
}
body .ui-button.ui-button--hot {
  font-weight: bold;
}

/* Standard Button - Warning State
 ========================================================================== */
.t-Button--warning:not(.t-Button--simple):not(.t-Button--hot) {
  color: @l_Button-Warning-Text;
  &:hover,
  &:not(:active):focus {
    background-color: lighten(@l_Button-Warning-BG,10%);
  }
  &,
  &:active,
  &.is-active {
    background-color: @l_Button-Warning-BG;
  }
}

/* Standard Button - Success State
 ========================================================================== */
.t-Button--success:not(.t-Button--simple):not(.t-Button--hot) {
  color: @l_Button-Success-Text;
  &:hover,
  &:not(:active):focus {
    background-color: lighten(@l_Button-Success-BG,5%);
  }
  &,
  &:active,
  &.is-active {
    background-color: @l_Button-Success-BG;
  }
}

/* Standard Button - Danger State
 ========================================================================== */
.t-Button--danger:not(.t-Button--simple):not(.t-Button--hot) {
  color: @l_Button-Danger-Text;
  &:hover,
  &:not(:active):focus {
    background-color: lighten(@l_Button-Danger-BG,5%);
  }
  &,
  &:active,
  &.is-active {
    background-color: @l_Button-Danger-BG;
  }
}

/* Standard Button - Primary State
 ========================================================================== */
.t-Button--primary:not(.t-Button--simple):not(.t-Button--hot) {
  color: @l_Button-Primary-Text;
  &:hover,
  &:not(:active):focus {
    background-color: lighten(@l_Button-Primary-BG,5%);
  }
  &,
  &:active,
  &.is-active {
    background-color: @l_Button-Primary-BG;
  }
}


/* ==========================================================================
   Simple Button
   ========================================================================== */

/* Default Simple Button
   ========================================================================== */
.t-Button--simple:not(.t-Button--hot):not(.t-Button--danger):not(.t-Button--primary):not(.t-Button--success):not(.t-Button--warning) {
  background-color: @l_Button-Simple-BG;
  color: @l_Button-Simple-Text;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.125) inset;
  &:hover,
  &:focus,
  &.is-active {
    background-color: contrast(@l_Button-Simple-BG, darken(@l_Button-Simple-BG,   10%), lighten(@l_Button-Simple-BG,   10%),  43%);
    // box-shadow: 0 0 0 1px contrast(@l_Button-Simple-BG, darken(@l_Button-Simple-BG,   10%), lighten(@l_Button-Simple-BG,   10%),  43%) inset;
  }
}

/* Hot Simple Button
   ========================================================================== */
.t-Button--simple.t-Button--hot {
  // @textColor: contrast(@l_Button-Simple-BG, mix(darken(@l_Button-Simple-BG,  70%),  @l_Button-Hot-BG), mix(lighten(@l_Button-Simple-BG,  70%),  @l_Button-Hot-BG), 50%);
  @dark: darken(@l_Button-Hot-BG,25%);
  @light: lighten(@l_Button-Hot-BG,0%);
  @textColor: contrast(@l_Button-Hot-BG,@dark,@light);
  &,
  .t-Icon { color: @textColor; }
  box-shadow: 0 0 0 1px @l_Button-Hot-BG inset;
  background-color: @l_Button-Simple-BG;
  &:hover,
  &:focus,
  &.is-active {
    background-color: @l_Button-Hot-BG;
    color: @l_Button-Hot-Text;
    // box-shadow: 0 0 0 1px @l_Button-Hot-BG inset;
    .t-Icon { color: @l_Button-Hot-Text; }
  }
}

/* Primary Simple Button
   ========================================================================== */
.t-Button--simple.t-Button--primary:not(.t-Button--hot) {
  @dark: darken(@l_Button-Primary-BG,25%);
  @light: lighten(@l_Button-Primary-BG,0%);
  @textColor: contrast(@l_Button-Primary-BG,@dark,@light);
  &,
  .t-Icon { color: @textColor; }
  box-shadow: 0 0 0 1px @l_Button-Primary-BG inset;
  background-color: @l_Button-Simple-BG;
  &:hover,
  &:focus,
  &.is-active {
    background-color: @l_Button-Primary-BG;
    color: @l_Button-Primary-Text;
    .t-Icon { color: @l_Button-Primary-Text; }
  }
}

/* Warning Simple Button
   ========================================================================== */
.t-Button--simple.t-Button--warning:not(.t-Button--hot) {
  // @textColor: contrast(@l_Button-Simple-BG, mix(darken(@l_Button-Simple-BG,  90%),  @l_Button-Warning-BG), mix(lighten(@l_Button-Simple-BG,  90%),  @l_Button-Warning-BG), 50%);
  @dark: darken(@l_Button-Warning-BG,25%);
  @light: lighten(@l_Button-Warning-BG,0%);
  @textColor: contrast(@l_Button-Warning-BG,@dark,@light);
  &,
  .t-Icon { color: @textColor; }
  box-shadow: 0 0 0 1px @l_Button-Warning-BG inset;
  background-color: @l_Button-Simple-BG;
  &:hover,
  &:focus,
  &.is-active {
    background-color: @l_Button-Warning-BG;
    color: @l_Button-Warning-Text;
    // box-shadow: 0 0 0 1px @l_Button-Warning-BG inset;
    .t-Icon { color: @l_Button-Warning-Text; }
  }
}

/* Danger Simple Button
   ========================================================================== */
.t-Button--simple.t-Button--danger:not(.t-Button--hot) {
  // @textColor: contrast(@l_Button-Simple-BG, mix(darken(@l_Button-Simple-BG,  90%),  @l_Button-Danger-BG), mix(lighten(@l_Button-Simple-BG,  90%),  @l_Button-Danger-BG), 50%);
  @dark: darken(@l_Button-Danger-BG,25%);
  @light: lighten(@l_Button-Danger-BG,0%);
  @textColor: contrast(@l_Button-Danger-BG,@dark,@light);
  &,
  .t-Icon { color: @textColor; }
  box-shadow: 0 0 0 1px @l_Button-Danger-BG inset;
  background-color: @l_Button-Simple-BG;
  &:hover,
  &:focus,
  &.is-active {
    background-color: @l_Button-Danger-BG;
    color: @l_Button-Danger-Text;
    // box-shadow: 0 0 0 1px @l_Button-Danger-BG inset;
    .t-Icon { color: @l_Button-Danger-Text; }
  }
}

/* Success Simple Button
   ========================================================================== */
.t-Button--simple.t-Button--success:not(.t-Button--hot) {
  // @textColor: contrast(@l_Button-Simple-BG, mix(darken(@l_Button-Simple-BG,  90%),  @l_Button-Success-BG), mix(lighten(@l_Button-Simple-BG,  90%),  @l_Button-Success-BG), 50%);
  @dark: darken(@l_Button-Success-BG,25%);
  @light: lighten(@l_Button-Success-BG,0%);
  @textColor: contrast(@l_Button-Success-BG,@dark,@light);
  &,
  .t-Icon { color: @textColor; }
  box-shadow: 0 0 0 1px @l_Button-Success-BG inset;
  background-color: @l_Button-Simple-BG;
  &:hover,
  &:focus,
  &.is-active {
    background-color: @l_Button-Success-BG;
    color: @l_Button-Success-Text;
    // box-shadow: 0 0 0 1px @l_Button-Success-BG inset;
    .t-Icon { color: @l_Button-Success-Text; }
  }
}

/* ==========================================================================
   No UI and Link Style Buttons
   ========================================================================== */

/* Default No UI Button
   ========================================================================== */
.t-Button--noUI {
  background-color: transparent !important;
  &:not(:hover):not(:focus):not(.is-active) {
    box-shadow: none;
  }
  &:hover,
  &:focus,
  &.is-active {
    background-color: contrast(@l_Button-Simple-BG, darken(@l_Button-Simple-BG,   10%), lighten(@l_Button-Simple-BG,   10%),  43%);
    // box-shadow: 0 0 0 1px rgba(0,0,0,0.125) inset;
  }
  &:focus:hover {
    box-shadow: 0 0 0 1px rgba(0,0,0,0.125) inset;
  }
}


/* Default Link Style Button
   ========================================================================== */
.t-Button--link {
  background-color: transparent !important;
  box-shadow: none !important;
  &:hover {
    text-decoration: underline;
  }
  &:focus {
    // box-shadow: 0 0 0 1px currentColor inset !important;
  }
  &.t-Button,
  .t-Icon {
    color: @g_Link-Base;
  }
}


/* Hot No UI Button
   ========================================================================== */
.t-Button--noUI.t-Button--hot {
  // @textColor: contrast(@l_Button-Hot-BG, mix(darken(@l_Button-Hot-BG,  40%),  #FFF), mix(lighten(@l_Button-Hot-BG,  40%),  #FFF), 50%);
  @dark: darken(@l_Button-Hot-BG,25%);
  @light: lighten(@l_Button-Hot-BG,0%);
  @textColor: contrast(@l_Button-Hot-BG,@dark,@light);
  &,
  .t-Icon { color: @textColor; }
}

/* Primary No UI Button
   ========================================================================== */
.t-Button--noUI.t-Button--primary,
.t-Button--link.t-Button--primary {
  // @textColor: contrast(@l_Button-Primary-BG, mix(darken(@l_Button-Primary-BG,  40%),  #FFF), mix(lighten(@l_Button-Primary-BG,  40%),  #FFF), 50%);
  @dark: darken(@l_Button-Primary-BG,25%);
  @light: lighten(@l_Button-Primary-BG,0%);
  @textColor: contrast(@l_Button-Primary-BG,@dark,@light);
  &,
  .t-Icon { color: @textColor !important; }
}

/* Warning No UI Button
   ========================================================================== */
.t-Button--noUI.t-Button--warning,
.t-Button--link.t-Button--warning {
  // @textColor: contrast(@l_Button-Warning-BG, mix(darken(@l_Button-Warning-BG,  40%),  #FFF), mix(lighten(@l_Button-Warning-BG,  40%),  #FFF), 50%);
  @dark: darken(@l_Button-Warning-BG,25%);
  @light: lighten(@l_Button-Warning-BG,0%);
  @textColor: contrast(@l_Button-Warning-BG,@dark,@light);
  &,
  .t-Icon { color: @textColor !important; }
}

/* Danger No UI Button
   ========================================================================== */
.t-Button--noUI.t-Button--danger,
.t-Button--link.t-Button--danger {
  // @textColor: contrast(@l_Button-Danger-BG, mix(darken(@l_Button-Danger-BG,  40%),  #FFF), mix(lighten(@l_Button-Danger-BG,  40%),  #FFF), 50%);
  @dark: darken(@l_Button-Danger-BG,25%);
  @light: lighten(@l_Button-Danger-BG,0%);
  @textColor: contrast(@l_Button-Danger-BG,@dark,@light);
  &,
  .t-Icon { color: @textColor !important; }
}

/* Success No UI Button
   ========================================================================== */
.t-Button--noUI.t-Button--success,
.t-Button--link.t-Button--success {
  // @textColor: contrast(@l_Button-Success-BG, mix(darken(@l_Button-Success-BG,  40%),  #FFF), mix(lighten(@l_Button-Success-BG,  40%),  #FFF), 50%);
  @dark: darken(@l_Button-Success-BG,25%);
  @light: lighten(@l_Button-Success-BG,0%);
  @textColor: contrast(@l_Button-Success-BG,@dark,@light);
  &,
  .t-Icon { color: @textColor !important; }
}


/* ==========================================================================
   High Contrast
   ========================================================================== */
// Removing as it is already in Core
// .t-Button--pillStart {
//   border-top-right-radius: 0 !important;
//   border-bottom-right-radius: 0 !important;
// }
// .t-Button--pillEnd {
//   border-top-left-radius: 0 !important;
//   border-bottom-left-radius: 0 !important;
// }
// .t-Button--pill {
//   border-radius: 0 !important;
// }

// Why is this needed?
// .t-Button--hideShow {
//   &.t-Button {border-radius: 100%;}
// }

.t-Header-branding .t-Button {
  // Removing !important to fix bugs where the menu button would not show active state
  background-color: transparent;
}


.t-Button.t-Button--header {
  // transition: none;
  border-radius: 2px;
  box-shadow: none;
  &:focus,
  &:active:focus {
    &:before {
      box-shadow: 0 0 0 1px lighten(@g_Focus,15%) inset !important;
    }
  }
  &:hover,  &:focus,  &:active, {
    background-color: transparent;
  }
  &:hover {
    background-color: rgba(0,0,0,.1);
  }
  &:active,  &:focus:active {
    background-color: rgba(0,0,0,.4);
  }
  &.is-active {
    background-color: rgba(0,0,0,.25);
    box-shadow: none;
  }
}
.t-Button.t-Button--headerTree {
  min-width: 32px;
  &:focus {
    box-shadow: 0 0 0 1px lighten(@g_Focus,15%) inset;
  }
  @media only screen and (max-width: 480px) {
    background-color: rgba(0,0,0,.25);
  }
}
.t-Button.t-Button--headerRight {
  background-color: @g_Actions-Col-BG;
  border: 1px solid contrast(@g_Actions-Col-BG, darken(@g_Actions-Col-BG,   10%), lighten(@g_Actions-Col-BG,   10%),  43%);
  &:hover {
    background-color: contrast(@g_Actions-Col-BG, darken(@g_Actions-Col-BG,   10%), lighten(@g_Actions-Col-BG,   10%),  43%);
  }
  &:active,
  &.is-active {
    color: fade(contrast(@g_Actions-Col-BG, desaturate(darken(@g_Actions-Col-BG,  75%), 100%), desaturate(lighten(@g_Actions-Col-BG,  75%), 50%)), 100%);
  }
}
.t-Button--navBar {
  .t-Button-badge {
    border-radius: @g_Button-BorderRadius;
    background-color: rgba(0,0,0,.35);
  }
}

.t-Button--helpButton .a-Icon {
  opacity: .5;
}

/* Navigation Bar Menus
   ========================================================================== */
@l_NavBarButton-Active-BG: darken(@g_Accent-BG,15%);
// @l_NavBarButton-Active-FG: contrast(@bg, darken(@bg,  75), lighten(@bg,  75),  43%);
@l_NavBarButton-Active-FG: fade(contrast(@l_NavBarButton-Active-BG, desaturate(darken(@l_NavBarButton-Active-BG,  75%), 100%), desaturate(lighten(@l_NavBarButton-Active-BG,  75%), 50%)), 100%);
.t-Header-navBar .t-Button--header.is-active {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background-color: @l_NavBarButton-Active-BG;
  color: @l_NavBarButton-Active-FG;
}

/* ==========================================================================
   Modifiers in Buttons
   ========================================================================== */

/* Set white for when
   ========================================================================== */
.t-Button.t-Button--noUI,
.t-Button.t-Button--link,
.t-Button.t-Button--simple {
  .fa:after {
    background-color: #FFF;
  }
}

/* Danger Button
   ========================================================================== */
.t-Button--danger,
.t-Button--simple.t-Button--danger:hover {
  .fa:after {
    background-color: @g_Danger-BG;
  }
}

/* Success Button
   ========================================================================== */
.t-Button--success,
.t-Button--simple.t-Button--success:hover {
  .fa:after {
    background-color: @g_Success-BG;
  }
}

/* Primary Button
   ========================================================================== */
.t-Button--primary,
.t-Button--simple.t-Button--primary:hover {
  .fa:after {
    background-color: @g_Primary-BG;
  }
}

/* Warning Button
   ========================================================================== */
.t-Button--warning,
.t-Button--simple.t-Button--warning:hover {
  .fa:after {
    background-color: @g_Warning-BG;
  }
}

/* Hot Button
   ========================================================================== */
.t-Button--hot,
.t-Button--simple.t-Button--hot:hover {
  .fa:after {
    background-color: @l_Button-Hot-BG;
  }
}