/**
 * Import Compass and Theme Variables
 */

@import "_variables";

/*
{
  "var" : "@l_Button-BorderRadius",
  "name" : "UTR.LESS.BORDER_RADIUS",
  "type" : "number",
  "units": "px",
  "range": {
    "min": 0,
    "max": 24,
    "increment": 2
  },
  "group": "UTR.LESS.BUTTONS"
}
*/
@l_Button-BorderRadius:         2px;
/*
{
  "var" : "@l_Button-BG",
  "name" : "UTR.LESS.BACKGROUND",
  "type" : "color",
  "group": "UTR.LESS.BUTTONS",
  "subgroup": "UTR.LESS.NORMAL"
}
*/
@l_Button-BG:                      #E7EBED;

@l_Button-BG-top: #f1f3f3;
@l_Button-BG-bottom: #e3e7e9;

/*
{
  "var" : "@l_Button-Text",
  "name" : "UTR.LESS.TEXT",
  "type" : "color",
  "group": "UTR.LESS.BUTTONS",
  "subgroup": "UTR.LESS.NORMAL"
}
*/
@l_Button-Text-tmp:                 contrast(@l_Button-BG, darken(@l_Button-BG,  75%), lighten(@l_Button-BG,  75%),  43%);
@l_Button-Text:                     #000;

/*
{
  "var" : "@l_Button-Hot-BG",
  "name" : "UTR.LESS.BACKGROUND",
  "type" : "color",
  "group": "UTR.LESS.BUTTONS",
  "subgroup": "UTR.LESS.HOT"
}
*/
@l_Button-Hot-BG:                   @g_Link-Base;

@l_Button-Hot-BG-top:               lighten(@l_Button-Hot-BG,1%);
@l_Button-Hot-BG-bottom:            darken(@l_Button-Hot-BG,1%);

/*
{
  "var" : "@l_Button-Hot-Text",
  "name" : "UTR.LESS.TEXT",
  "type" : "color",
  "group": "UTR.LESS.BUTTONS",
  "subgroup": "UTR.LESS.HOT"
}
*/
@l_Button-Hot-Text-tmp:   contrast(@l_Button-Hot-BG, darken(@l_Button-Hot-BG,   85%), lighten(@l_Button-Hot-BG,   85%),  43%);
@l_Button-Hot-Text:       fade(@l_Button-Hot-Text-tmp,100%);

/*
{
  "var" : "@l_Button-Primary-BG",
  "name" : "UTR.LESS.BACKGROUND",
  "type" : "color",
  "group": "UTR.LESS.BUTTONS",
  "subgroup": "UTR.LESS.PRIMARY"
}
*/
@l_Button-Primary-BG:               darken(@g_Primary-BG,6%);

@l_Button-Primary-BG-top:                   lighten(@l_Button-Primary-BG,2%);
@l_Button-Primary-BG-bottom:                darken(@l_Button-Primary-BG,2%);


/*
{
  "var" : "@l_Button-Primary-Text",
  "name" : "UTR.LESS.TEXT",
  "type" : "color",
  "group": "UTR.LESS.BUTTONS",
  "subgroup": "UTR.LESS.PRIMARY"
}
*/
@l_Button-Primary-Text:             fade(@g_Primary-FG, 100%);

/*
{
  "var" : "@l_Button-Danger-BG",
  "name" : "UTR.LESS.BACKGROUND",
  "type" : "color",
  "group": "UTR.LESS.BUTTONS",
  "subgroup": "UTR.LESS.DANGER"
}
*/
@l_Button-Danger-BG:               @g_Danger-BG;

@l_Button-Danger-BG-top:          lighten(@l_Button-Danger-BG,0%);
@l_Button-Danger-BG-bottom:       darken(@l_Button-Danger-BG,4%);

/*
{
  "var" : "@l_Button-Danger-Text",
  "name" : "UTR.LESS.TEXT",
  "type" : "color",
  "group": "UTR.LESS.BUTTONS",
  "subgroup": "UTR.LESS.DANGER"
}
*/
@l_Button-Danger-Text:              fade(@g_Danger-FG, 100%);

/*
{
  "var" : "@l_Button-Warning-BG",
  "name" : "UTR.LESS.BACKGROUND",
  "type" : "color",
  "group": "UTR.LESS.BUTTONS",
  "subgroup": UTR.LESS.WARNING"
}
*/
@l_Button-Warning-BG:               @g_Warning-BG;

@l_Button-Warning-BG-top:          lighten(@l_Button-Warning-BG,2%);
@l_Button-Warning-BG-bottom:       darken(@l_Button-Warning-BG,2%);


/*
{
  "var" : "@l_Button-Warning-Text",
  "name" : "UTR.LESS.TEXT",
  "type" : "color",
  "group": "UTR.LESS.BUTTONS",
  "subgroup": "UTR.LESS.WARNING"
}
*/
@l_Button-Warning-Text:             fade(@g_Warning-FG, 100%);

/*
{
  "var" : "@l_Button-Success-BG",
  "name" : "UTR.LESS.BACKGROUND",
  "type" : "color",
  "group": "UTR.LESS.BUTTONS",
  "subgroup": "UTR.LESS.SUCCESS"
}
*/
@l_Button-Success-BG:                @g_Success-BG;

@l_Button-Success-BG-top:          lighten(@l_Button-Success-BG,2%);
@l_Button-Success-BG-bottom:       darken(@l_Button-Success-BG,2%);

/*
{
  "var" : "@l_Button-Success-Text",
  "name" : "UTR.LESS.TEXT",
  "type" : "color",
  "group": "UTR.LESS.BUTTONS",
  "subgroup": "UTR.LESS.SUCCESS"
}
*/
@l_Button-Success-Text:             fade(@g_Success-FG, 100%);

/*
{
  "var" : "@l_Button-Simple-BG",
  "name" : "UTR.LESS.BACKGROUND",
  "type" : "color",
  "group": "UTR.LESS.BUTTONS",
  "subgroup": "UTR.LESS.SIMPLE"
}
*/
@l_Button-Simple-BG:                #FFFFFF;

/*
{
  "var" : "@l_Button-Simple-Text",
  "name" : "UTR.LESS.TEXT",
  "type" : "color",
  "group": "UTR.LESS.BUTTONS",
  "subgroup": "UTR.LESS.SIMPLE"
}
*/
@l_Button-Simple-Text:              fade(contrast(@l_Button-Simple-BG, darken(@l_Button-Simple-BG, 75%), lighten(@l_Button-Simple-BG, 75%)), 100%);


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

.t-Button,
.ui-button {
  padding: .7rem 1.0rem;
}
.t-Button--small {
  padding: .3rem .8rem;
}
.t-Button--large {
  padding: 1.3rem 1.6rem;
  &.t-Button--withIcon {
    padding: 1.1rem 1.4rem;
  }
}
.t-Button--helpButton,
.a-Button.a-Button--popupLOV,
.a-Button.a-Button--calendar {
  padding: 0.3rem 0.8rem;
}

/* Basic Button
 ========================================================================== */
.t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc input + label,
.apex-button-group input + label,
.t-Button,
.a-Button,
.ui-button {
  // border-color: #c4ced7;
  border: none;
  color: @l_Button-Text;
  font-weight: bold;
  background-clip: padding-box;
  border-radius: @l_Button-BorderRadius;
  background-color: @l_Button-BG;

  background-image: linear-gradient(to bottom, #f1f3f3 0%, #e7ebed 50%, #e3e7e9 100%);
  border: 1px solid darken(@l_Button-BG,12%);
  box-shadow: 0 1px 0 0 rgba(255,255,255,.9) inset;
  text-shadow: 0 1px 0 rgba(255,255,255,.9);
}

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

.t-Button,
.a-Button,
.ui-button {
  &:hover {
    box-shadow: none;
    background: lighten(@l_Button-BG,6.5%);
    color: @g_Link-Base;
    text-shadow: none;
  }
  &.t-Button--simple {
    background: @l_Button-Simple-BG;
    color: @l_Button-Simple-Text;
    // box-shadow: 0 0 0 1px rgba(0,0,0,0.125) inset;
    // text-shadow: none;
    &:hover {
      color: @g_Link-Base;
      // 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;
    }
  }
}


/* Button States
 ========================================================================== */
.t-Button:hover,
.a-Button:hover {
  z-index: 100;
}
.t-Button:focus,
.a-Button:focus {
  outline: none;
  z-index: 110;
}
.t-Button:focus,
.a-Button:focus,
.t-Button:active:focus,
.a-Button:active:focus {
  box-shadow: 0 0 0 1px @l_Button-Hot-Text, 0 0 0 3px fade(@g_Focus, 25%) !important;
  border-color: @g_Focus;
}
.t-Button:active {
  // background-color: darken(@l_Button-BG, 10%);
  // box-shadow: 0 0 0 1px rgba(0,0,0,0.20) inset, 0 1px 2px rgba(0,0,0,0.25) inset;
  // z-index: 100;
}
.t-Button:active:focus {
  // box-shadow: 0 0 0 1px rgba(0,0,0,0.20) inset, 0 1px 2px rgba(0,0,0,0.25) inset !important;
}
.a-Button,
.t-Button,
.ui-button {
  &:active,
  &.is-active,
  &.is-active:not(:active),
  &.is-active:active {
    border: 1px solid darken(@l_Button-Hot-BG,2%) !important;
    background: none @l_Button-Hot-BG !important;
    color: @l_Button-Hot-Text !important;
    z-index: 100;
    text-shadow: none;
    box-shadow: none;
    .a-Icon, .fa {
      color: @l_Button-Hot-Text !important;
    }
  }
}

.hoverButton(@text, @top, @bottom) {
  color: @text;
  background-color: @top;
  background-image: linear-gradient(to bottom, lighten(@top, 10%), lighten(@bottom, 10%));
}


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

.t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc input:checked + label,
.apex-button-group input:checked + label {
    border: 1px solid darken(@l_Button-Hot-BG,2%) !important;
    background: none @l_Button-Hot-BG !important;
    color: @l_Button-Hot-Text !important;
    z-index: 100;
    text-shadow: none;
    box-shadow: none;
}

/* Hot Button
 ========================================================================== */
.t-Button--hot,
body .ui-button.ui-button--hot,
body button.ui-state-default.ui-priority-primary {
  background-color: @l_Button-Hot-BG;
  background-image: linear-gradient(to bottom, @l_Button-Hot-BG-top, @l_Button-Hot-BG-bottom);
  border: 1px solid darken(@l_Button-Hot-BG,2%);
  box-shadow: 0 1px 0 0 rgba(255,255,255,.25) inset;
  color: @l_Button-Hot-Text;
  text-shadow: none;
  &:hover {
    text-shadow: none;
    .hoverButton(@l_Button-Hot-Text, @l_Button-Hot-BG-top, @l_Button-Hot-BG-bottom);

  }
  &.t-Button--noUI,
  &.t-Button--link {
    color: @l_Button-Hot-BG;
  }
  &.t-Button--simple {
    .t-Icon { color: @l_Button-Hot-BG }
    background-color: @l_Button-Simple-BG;
    color: @l_Button-Hot-BG;
    &:hover,
    &:focus,
    &:active {
      background-color: @l_Button-Hot-BG;
      color: @l_Button-Hot-Text;
      .t-Icon { color: @l_Button-Hot-Text; }
    }
  }
}

/* Primary Button
 ========================================================================== */
.t-Button--primary {
  background-color: @l_Button-Primary-BG;
  background-image: linear-gradient(to bottom, @l_Button-Primary-BG-top, @l_Button-Primary-BG-bottom);
  border: 1px solid darken(@l_Button-Primary-BG,12%);
  box-shadow: 0 1px 0 0 rgba(255,255,255,.9) inset;
  text-shadow: 0 1px 0 rgba(255,255,255,.9);
  color: @l_Button-Primary-Text;
  text-shadow: none;
  &:hover {
    .hoverButton(@l_Button-Primary-Text, @l_Button-Primary-BG-top, @l_Button-Primary-BG-bottom);
  }
  &:active,
  &.is-active {
    background-color: darken(@l_Button-Primary-BG,10%);
  }
  &.t-Button--simple {
    @primaryContrast: contrast(@l_Button-Simple-BG, mix(darken(@l_Button-Simple-BG,  90%),  @l_Button-Primary-BG), mix(lighten(@l_Button-Simple-BG,  90%),  @l_Button-Primary-BG), 50%);
    .t-Icon { color: @primaryContrast; }
    // box-shadow: 0 0 0 1px @l_Button-Primary-BG inset;
    background-color: @l_Button-Simple-BG;
//    color: @l_Button-Primary-BG;
    color: @primaryContrast;

    &:hover,
    &:focus,
    &:active {
      background-color: @l_Button-Primary-BG;
      color: @l_Button-Primary-Text;
      .t-Icon { color: @l_Button-Primary-Text; }
    }
  }
  &.t-Button--noUI,
  &.t-Button--link {
    &,
    .t-Icon { color:  darken(@l_Button-Primary-BG,30%); }
  }
}

/* Danger Button
 ========================================================================== */
.t-Button--danger {
  background-color: @l_Button-Danger-BG;
  background-image: linear-gradient(to bottom, @l_Button-Danger-BG-top, @l_Button-Danger-BG-bottom);
  border: 1px solid darken(@l_Button-Danger-BG,4%);
  box-shadow: 0 1px 0 0 rgba(255,255,255,.35) inset;
  color: @l_Button-Danger-Text;
  text-shadow: none;
  &:hover {
    .hoverButton(@l_Button-Danger-Text, @l_Button-Danger-BG-top, @l_Button-Danger-BG-bottom);
  }
  &:active,
  &.is-active {
    color: @l_Button-Danger-Text;
    background-color: darken(@l_Button-Danger-BG,10%);
  }
  &.t-Button--simple {
    @dangerContrast: contrast(@l_Button-Simple-BG, mix(darken(@l_Button-Simple-BG,  75%),  @l_Button-Danger-BG), mix(lighten(@l_Button-Simple-BG,  75%),  @l_Button-Danger-BG), 50%);
    .t-Icon { color: @dangerContrast; }
    background-color: @l_Button-Simple-BG;
    color: @dangerContrast;

    &:hover,
    &:focus,
    &: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; }
    }
  }
  &.t-Button--noUI,
  &.t-Button--link {
    &,
    .t-Icon { color:  darken(@l_Button-Danger-BG,10%); }
  }
}

/* Warning Button
 ========================================================================== */
.t-Button--warning {
  background-color: @l_Button-Warning-BG;
  background-image: linear-gradient(to bottom, @l_Button-Warning-BG-top, @l_Button-Warning-BG-bottom);
  border: 1px solid darken(@l_Button-Warning-BG,8%);
  box-shadow: 0 1px 0 0 rgba(255,255,255,.35) inset;
  color: @l_Button-Warning-Text;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
  &:hover {
    .hoverButton(@l_Button-Warning-Text, @l_Button-Warning-BG-top, @l_Button-Warning-BG-bottom);
  }
  &:active,
  &.is-active {
    background: darken(@l_Button-Warning-BG,4%);
    color: @l_Button-Warning-Text;
  }
  &.t-Button--simple {
    @warningContrast: 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%);
    .t-Icon { color:  @warningContrast; }
    background-color: @l_Button-Simple-BG;
    color:  @warningContrast;

    &:hover,
    &:focus,
    &:active {
      background-color: @l_Button-Warning-BG;
      color: @l_Button-Warning-Text;
      .t-Icon { color: @l_Button-Warning-Text; }
    }
  }
  &.t-Button--noUI,
  &.t-Button--link {
    @warningContrast: 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%);
    &,
    .t-Icon { color:  @warningContrast; }
  }
}

/* Success Button
 ========================================================================== */
.t-Button--success {
  background-color: @l_Button-Success-BG;
  background-image: linear-gradient(to bottom, @l_Button-Success-BG-top, @l_Button-Success-BG-bottom);
  border: 1px solid darken(@l_Button-Success-BG,8%);
  box-shadow: 0 1px 0 0 rgba(255,255,255,.35) inset;
  color: @l_Button-Success-Text;
  text-shadow: none;
  &:hover {
    .hoverButton(@l_Button-Success-Text,  @l_Button-Success-BG-top, @l_Button-Success-BG-bottom);
  }
  &:active,
  &.is-active {
    background: darken(@l_Button-Success-BG,10%);
    color: @l_Button-Success-Text;
  }
  &.t-Button--simple {
    @successContrast: 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%);
    .t-Icon { color: @successContrast; }
    background-color: @l_Button-Simple-BG;
    color: @successContrast;
    &:hover,
    &:focus,
    &:active {
      background-color: @l_Button-Success-BG;
      color: @l_Button-Success-Text;
      .t-Icon { color: @l_Button-Success-Text; }
    }
  }
  &.t-Button--noUI,
  &.t-Button--link {
    &,
    .t-Icon { color:  darken(@l_Button-Success-BG,20%); }
  }
}

.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;
}

.t-Button--hideShow {
  &.t-Button {
    border-radius: 2px;
    padding: .7rem;
  }
}

.t-NavigationBar {
  .t-Button {
    font-weight: normal;
    color: #333;
    padding: 6px 10px;
    margin-left: 10px;
    background: none transparent;
    box-shadow: none;
    transition: none;
    border-radius: 2px;
    border-color: transparent;
    .a-Icon {
      color: #878C90;
    }
    // &:hover {
    //   background-color: #f7f8f9;
    //   color: @g_Link-Base;
    //   // border-color: #c4ced7;
    //   box-shadow: 0 0 0 1px #c4ced7 inset;
    //   .a-Icon {
    //     color: #85BBE7;
    //   }
    // }
  }
}

.t-Button{
  &.t-Button--headerTree {
    min-width: 32px;
    background-color: transparent;
    background-image: none;
    border-width: 0 !important;
    box-shadow: none;
    &.is-active {
      background-color: transparent !important;
      color: @g_Header-FG !important;
      border-width: 0 !important;
      box-shadow: none;
    }
    &.is-active .fa {
      color: @g_Header-FG !important;
    }
    // &:hover,
    // &:focus:hover {
    //   background-color: rgba(0,0,0,.3);
    // }
  }
  &.t-Button--headerRight {
    background-color: @g_Actions-Col-BG;
    background-image: none;
    border-width: 0 0 1px 1px;
    .u-RTL & {
      border-width: 0 1px 1px 0;
    }
    box-shadow: none;
    &:hover {
      background-color: contrast(@g_Actions-Col-BG, darken(@g_Actions-Col-BG,   10%), lighten(@g_Actions-Col-BG,   10%),  43%);
    }
    &:active,
    &.is-active {
      background: none rgba(0,0,0,.15) !important;
      color: fade(contrast(@g_Actions-Col-BG, desaturate(darken(@g_Actions-Col-BG,  75%), 100%), desaturate(lighten(@g_Actions-Col-BG,  75%), 50%)), 100%) !important;
      border-color: rgba(0,0,0,.15) !important;
    }
  }
}
.t-Button--navBar {
  .t-Button-badge {
    background-color: rgba(0,0,0,.35);
  }
}

.t-Button--noUI:not(:active),
.t-Button--link:not(:active) {
  background: transparent !important;
  border-color: transparent;
}
.t-Button--link:hover {
  text-decoration: underline;
}
.t-Button--helpButton .a-Icon {
  opacity: .5;
}

.a-Calendar-button {
  border-radius: @l_Button-BorderRadius;
  color: #707070;
}


/**
*
* Reset Button Styles
*
**/
.a-Button.a-Button--devToolbar,
.a-Button.a-IRR-sortWidget-button {
  background-image: none;
  border-width: 0;
  text-shadow: none;
}

/* ==========================================================================
   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;
  }
}