@import "../_variables";

// Disable Transitions
.a-Button:before,
.t-Button:before,
.ui-button:before,
.a-Button:after,
.t-Button:after,
.ui-button:after {
  transition: none;
}

.t-Button, .a-Button, .ui-button {
  border-radius: 3px;
  font-weight: 600;
}

.t-Button--tiny,
.t-Button--small {
  border-radius: 2px;
}

.t-Button--large {
  border-radius: 6px;
}

.t-Button--hot {
  font-weight: 700;
}

// ==========================================================================
// Standard Button - Primary State
// ==========================================================================
.t-Button--primary:not(.t-Button--simple):not(.t-Button--hot) {
  color: @g_neutral-10;

  &:hover,
  &:not(:active):focus {
    background-color: @g_neutral-150;
  }

  &,
  &:active,
  &.is-active {
    background-color: @g_neutral-160;
  }
}

// ==========================================================================
// Primary Simple Button
// ==========================================================================
.t-Button--simple.t-Button--primary:not(.t-Button--hot) {

  &,
  .t-Icon {
    color: @g_neutral-160;
  }

  box-shadow: 0 0 0 1px @g_neutral-140 inset;
  background-color: @l_Button-Simple-BG;

  &:hover,
  &:focus,
  &.is-active {
    background-color: @g_neutral-160;
    color: @g_neutral-10;

    .t-Icon {
      color: @g_neutral-10;
    }
  }
}

// ==========================================================================
// Primary No UI Button
// ==========================================================================
.t-Button--noUI.t-Button--primary,
.t-Button--link.t-Button--primary {

  &,
  .t-Icon {
    color: @g_neutral-160 !important;
  }
}

// ==========================================================================
// RW Focus Styles
// ==========================================================================
.t-Button:focus:before,
.a-Button:focus:before,
.ui-button:focus:before,
.t-Button.t-Button--headerTree:focus,
.t-Button.t-Button--header:focus:before,
.t-Button.t-Button--header:active:focus:before,
.t-Button.is-active:focus:before,
.a-Button.is-active:focus:before,
.ui-button.is-active:focus:before,
.a-Button:focus:after,
.t-Button:focus:after,
.ui-button:focus:after,
.a-Button:not(.t-Button--link):hover:after,
.t-Button:not(.t-Button--link):hover:after,
.ui-button:not(.t-Button--link):hover:after,
  {
  box-shadow: none !important;
}

.t-Button:focus:before,
.a-Button:focus:before,
.ui-button:focus:before,
.t-Button.is-active:focus:before,
.a-Button.is-active:focus:before,
.ui-button.is-active:focus:before,
.a-Toolbar-radioGroup input:focus + .a-Button,
.a-Toolbar-toggleButton input:focus + .a-Button,
.a-GV-pageButton:focus {
  box-shadow: none;
  outline-width: @g_OutlineWidth;
  outline-style: @g_OutlineStyle;
  outline-offset: @g_OutlineOffset;
  outline-color: @g_OutlineColor;
}


// Headers Button
.t-Button.t-Button--header {
  border-radius: 4px;
  font-size: 14px;
  padding: 12px;
}

.t-Button.t-Button--headerTree {
  min-width: 40px;
  min-height: 40px;
}

.t-Button--navBar .t-Icon.fa,
.t-Button--navBar .t-Icon.a-Icon {
  margin-right: 6px;
}

.t-Header-logo,
.t-Header .t-Button--header.is-active,
.t-Header .t-Button--header {
  color: @g_neutral-10;
}

// Hover
.t-Button.t-Button--header:hover {
  background-color: @g_neutral-190;
  box-shadow: none !important;
}

// Active
.t-Button.t-Button--header.is-active,
.t-Header-navBar .t-Button--header.is-active {
  background-color: @g_neutral-190;
  box-shadow: none !important;
}

.t-Button.t-Button--header:focus:before,
.t-Button.t-Button--header:active:focus:before {
  outline-color: currentColor;
}


// Button Group Focus
.t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc input:checked:focus + label,
.apex-button-group input:checked:focus + label {
  box-shadow: none !important;
  outline-width: @g_OutlineWidth !important;
  outline-style: @g_OutlineStyle !important;
  outline-offset: @g_OutlineOffset !important;
  outline-color: @g_OutlineColor !important;
  z-index: 1;
}

@media (max-width: 640px) {
  .apex-item-group--rc .apex-item-grid {
    overflow: visible;
  }
}