$disabled-button-bg: rgba(255, 255, 255, 0.8);

button {
  cursor: pointer;

  &:focus {
    outline: 0;
  }

  &:disabled {
    cursor: not-allowed;

    &.pending {
      cursor: wait;
    }
  }
}


// A button that looks just like a link (a disable-able link!)
.btn.btn-a {
  @extend a;
  color: $link-color !important;
  font-family: inherit;
  text-transform: inherit;
  padding: inherit;
  box-shadow: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: inherit;
  white-space: inherit;
  vertical-align: inherit;
  -webkit-font-smoothing: inherit;

  &:disabled {
    color: $gray !important;
    cursor: inherit;
  }

  &:focus {
    box-shadow: inherit;
  }
}


.btn-link {
  color: $link-color;
  box-shadow: none !important;

  &:hover { box-shadow: none !important; }

  &.text-gray, .text-gray {
    @extend .text-gray;
  }
}

// icon + title: h3  & subtitle?: p
.btn-action-icon {
  display: flex;
  align-items: center;
  text-align-last: left;
  padding-right: 2rem !important;


  .ico {
    width: 3rem;
    font-size: 1.2rem;
  }

  .btn-action-icon--title {
    @extend h3;
    @extend .mb-0;
    @extend .text-dark;
    display: block;
  }

  .btn-action-icon--subtitle {
    @extend p;
    text-transform: capitalize;
  }
}

.btn-text {
  color: $gray-dark;

  &[disabled="disabled"] {
    color: $gray-light;
  }
}

// NOTE: In general, we don't have icons in buttons, this being an exception for the ellipsis icon only, without text.
.btn-link-sm-ico {
  color: $gray-800;
  font-size: rem(22);
  line-height: 1;
  padding: 0 0 0 0.5rem;
}

.btn {
  @include brand-font-h2();
  font-size: 1rem;
  padding: 0.83em 1.2em 0.56em;
  border: none;
  box-shadow: $btn-box-shadow;
  cursor: pointer;
  // specifying border radius -- default useragent stylesheet in chrome 62 added 4px by default.
  border-radius: 0;

  &:disabled, &[disabled], &.disabled {
    box-shadow: none;
  }

  &:focus {
    box-shadow: $btn-box-shadow;
  }

  &.btn-link-sm-ico {
    @extend .btn-link;
    @extend .btn-sm;
    padding: rem(4);
    padding-bottom: 0;
    font-size: rem(11);
  }

  + p { @extend .mt-2; }
}

.btn-lg {
  font-size: rem(24);
}

.btn-sm {
  font-size: rem(14);
  padding: 0.5em 1.2em 0.25em;
}

// $background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)
.btn-primary, .input-group-addon.btn-primary, .btn-info, .input-group-addon.btn-info { @include button($blue-700); }
.btn-secondary, .input-group-addon.btn-secondary { @include button($white, $white, $gray-50); }
.btn-success, .input-group-addon.btn-success { @include button($alert-green); }
.btn-warning, .input-group-addon.btn-warning { @include button($yellow-700); }
.btn-danger, .input-group-addon.btn-danger { @include button($red-700); }
.btn-new, .input-group-addon.btn-new { @include button($blue-700); }
.fixed-action-btn .fab-new .fab-toggle, .fixed-action-btn.fab-new .fab-toggle { @include button($blue-700); }

.btn-primary-outline { @include outline($blue-700); }
.btn-secondary-outline { @include outline($gray-800, $gray-500); }
.btn-success-outline { @include outline($alert-green); }
.btn-warning-outline { @include outline($gray-800, $brand-warning); &:hover { color: $gray-950; }}
.btn-danger-outline { @include outline($red-700); }


.btn-default {
  @include button($gray-150);
  color: $link-color;
}

.btn-edge-left {
  margin-left: -2.25rem;
}

.btn .ico {
  font-size: 1em;

  &:before {
    font-size: 1.3em;
    vertical-align: middle;
    margin-top: -2px;
  }
}

.fixed-action-btn {
  position: relative;

  .fab-toggle {
    width: 50px;
    height: 50px;
    background: $gray-700;
    color: $white;
    border-radius: 50%;
    font-size: 1.75em;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: $btn-box-shadow;
    cursor: pointer;
    position: relative;
    z-index: 5;
    transition: all .2s ease;

    .ico {
      color: $white;
      transition: all .2s ease;
    }

    &:hover {
      text-decoration: none;
    }
  }

  &.fab-disabled .fab-toggle, .fab-btn.is-disabled {
    opacity: 0.33 !important;
    cursor: not-allowed;
  }

  &:hover {

    .fab-toggle.fab-multi-action {

      .ico {
        transform: rotate(45deg) scale(.8);
        opacity: 0;
      }

      .ico.primary-action {
        transform: rotate(0deg) scale(1);
        opacity: 1;
      }
    }
  }
}

.filter-bar-actions .fixed-action-btn {
  position: absolute;
  right: 3rem;
  margin-top: rem(-10);
}

.fab-links {
  position: absolute;
  top: -35px;
  height: 120px;
  left: -225px;
  width: 292px;
  padding: 40px 71px 40px 10px;
  z-index: 1;
  visibility: hidden;
  list-style-type: none;

  li {
    display: flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    float: right;
    position: relative;
    margin-right: 10px;
  }

  a {
    text-decoration: none;
  }
}

.fixed-action-btn.up {

  .fab-links {
    width: 40px;
    height: auto;
    top: 0;
    transform: translateY(-100%);
    left: 5px;
    padding: 0;

    li {
      margin-bottom: 10px;
      margin-right: 0;
      float: none;
    }
  }
}

.fab-btn {
  width: 40px;
  height: 40px;
  display: flex;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  justify-content: center;
  align-items: center;
  transition: all .2s ease;
  box-shadow: $btn-box-shadow;
  transform: scaleY(0.4) scaleX(0.4);
  opacity: 0;

  strong {
    font-size: 0.75rem;
  }

  &:hover {
    color: $white;
  }

  &:focus {
    color: $white;
  }
}

.fixed-action-btn:hover {

  .fab-toggle .ico {
    transform: rotate(135deg);
  }

  &.fab-locked .fab-toggle .ico {
    transform: none;
  }

  .fab-links {
    visibility: visible;
  }

  .fab-btn {
    transform: scaleY(1) scaleX(1);
    opacity: 1;
  }
}

.align-items-baseline-center {
  align-items: center !important;
}

.fab-toggle.fab-multi-action {

  .ico {
    position: absolute;
    transition: all .15s ease;
  }

  .ico.primary-action {
    transform: rotate(-45deg) scale(.8);
    opacity: 0;
  }
}

.fab-toggle.fab-single-action {
  background-color: lighten($alert-blue, 5%);

  .ico {
    transform: none;
  }
}


.fixed-action-btn .fab-toggle .ico,
.fixed-action-btn .fab-toggle .fa,
.fixed-action-btn .fab-toggle .accordion [data-toggle="collapse"],
.accordion .fixed-action-btn .fab-toggle [data-toggle="collapse"],
.fixed-action-btn .fab-toggle a:before {
  transform-origin: 50% 49%;
}


// btn-group-toggle

.btn-group-toggle {
  display: flex;
  align-content: stretch;

  .btn {
    width: 100%;
    border: 1px solid transparent;

    &.btn-secondary {

      &:not([disabled]):not(.disabled).active {
        box-shadow: none;
      }
    }
  }

  .ico {
    display: block;
    font-size: 1.5rem;
    padding: 1rem 0;
  }
}

.btn-group {
  .btn-primary-outline { @include outline($blue-700); }
}

.btn-group-toggle-inline {
  .ico {
    display: inline;
    position: relative;
    margin-top: 0;
    margin-right: 1rem;
  }
}

// In the presence of tabs
.breadcrumbs.with-tabs.fixed + .content .fixed-action-btn.fab-cog {
  position: fixed;
  top: 9.5rem;
}


// In forms

.input-group-btn .btn {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  box-shadow: none !important;
  padding: rem(8) rem(10) rem(4);
}

.input-group-btn .ico:before {
  font-size: 1rem;
}

.input-group  input + .input-group-btn button {
  border-radius: 0 0.25rem 0.25rem 0;
}



// in modals

.modal-footer .btn-link {
  color: $gunmetal;
}


// in tables
td .dropdown > .btn {
  padding-top: 0.4rem;
}
