/**
 * 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 {
    background-color: @l_Button-Simple-BG;
    color: @l_Button-Hot-BG;

    .t-Icon {
      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%);
    // box-shadow: 0 0 0 1px @l_Button-Primary-BG inset;
    background-color: @l_Button-Simple-BG;
    // color: @l_Button-Primary-BG;
    color: @primaryContrast;

    .t-Icon {
      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%);
    background-color: @l_Button-Simple-BG;
    color: @dangerContrast;

    .t-Icon {
      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%);
    background-color: @l_Button-Simple-BG;
    color: @warningContrast;

    .t-Icon {
      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%);
    background-color: @l_Button-Simple-BG;
    color: @successContrast;

    .t-Icon {
      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;
    padding: .3rem;
  }
}

.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;
    box-shadow: none;

    .u-RTL & {
      border-width: 0 1px 1px 0;
    }

    &: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);
    text-shadow: none;
  }
}

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

// Body Actions Button
.t-Body-actionsToggle {
  // border-radius: @l_Button-BorderRadius;
  background-color: @g_Actions-Col-BG;
  border-color: #D6DFE6;
  border-right-color: transparent;
  color: initial;

  .u-RTL & {
    border-color: rgba(0, 0, 0, .075);
    border-left-color: transparent;
  }

  &:active {
    background-color: contrast(@g_Actions-Col-BG, darken(@g_Actions-Col-BG,   10%), lighten(@g_Actions-Col-BG,   10%),  43%);
  }

  &:focus,
  &:active {
    border-color: @g_Focus;
  }
}