//
// Buttons
// --------------------------------------------------

.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: $btn-font-weight;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  font-family: $font-family-proxima-sbold;
  border-width: 0;

  @include button-size(
    $btn-padding-y - 1,
    $grid-unit-x * 3 - 1,
    $font-size-large,
    $btn-line-height,
    $btn-border-radius-base
  );
  @include user-select(none);

  &:hover,
  &:focus,
  &.focus {
    text-decoration: none;
  }

  &:active,
  &.active {
    background-image: none;
    outline: 0;
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    cursor: $cursor-disabled;

    @include opacity(0.65);
    @include box-shadow(none);
  }

  .fa,
  .far,
  .fas,
  .fal {
    margin-right: ceil($grid-unit-x * 1.5) - 5px;
    line-height: inherit;
    vertical-align: -6%;
    font-weight: $font-family-awesome-weight;
  }

  .btn-icon-pos-right {
    margin-right: 0;
    margin-left: ceil($grid-unit-x * 1.5) - 5px;
  }

  .badge {
    margin-left: 5px;
  }

  // Solid buttons
  // --------------------------------------------------

  &-default {
    @include button-default();
  }

  &-default-no-borders {
    @include button-default-no-borders();
  }

  &-primary {
    @include button-variant($btn-primary-bg, $brand-primary-dark-new);
  }

  &-success {
    @include button-variant($btn-success-bg, $brand-success-dark-new);
  }

  &-info {
    @include button-variant($btn-info-bg, $brand-info-dark-new);
  }

  &-warning {
    @include button-variant($btn-warning-bg, $brand-warning-dark-new);
  }

  &-danger {
    @include button-variant($btn-danger-bg, $brand-danger-dark-new);
  }

  // Link buttons
  // --------------------------------------------------

  &-link {
    &.btn-default {
      @include button-link-default();
    }

    &.btn-primary {
      @include button-link-variant($brand-primary);
    }

    &.btn-success {
      @include button-link-variant($brand-success);
    }

    &.btn-info {
      @include button-link-variant($brand-info);
    }

    &.btn-warning {
      @include button-link-variant($brand-warning);
    }

    &.btn-danger {
      @include button-link-variant($brand-danger);
    }

    &.btn-inverse {
      @include button-link-variant($color-white);
    }
  }

  // Style Variations
  // ---------------------

  &-inverse {
    border-color: $color-white;
    color: $color-white;
    background-color: transparent;

    &:hover,
    &:focus,
    &.focus {
      color: $brand-primary;
      background-color: $color-white;
      border-color: $color-white;
    }

    &:active,
    &.active,
    .open > &.dropdown-toggle {
      background-color: $color-white-rgba-24;
      border-color: $color-white;
      color: $color-white;
      background-image: none;

      &:hover,
      &:focus,
      &.focus {
        background-color: $color-white;
        border-color: $color-white;
        color: $brand-primary;
      }
    }

    &.disabled,
    &[disabled],
    fieldset[disabled] & {
      &,
      &:hover,
      &:focus,
      &.focus {
        cursor: not-allowed;
        pointer-events: none;
        background-color: $color-grey-rgba-08;
        border-color: $color-white;
        color: $color-white;
      }
    }
  }

  &-rounded {
    border-radius: ceil($grid-unit-y * 2.5);

    &.btn-lg {
      border-radius: $grid-unit-y * 3;
    }

    &.btn-sm {
      border-radius: $grid-unit-y * 2;
    }
  }

  &-squared {
    @mixin btn-squared() {
      .fa,
      .far,
      .fas,
      .fal {
        margin-right: 0;
      }

      &,
      &.btn-link {
        width: $grid-unit-y * 5;
        padding-left: 0;
        padding-right: 0;
      }

      &.btn-lg,
      &.btn-link.btn-lg {
        width: $grid-unit-y * 6;
        padding-left: 0;
        padding-right: 0;
      }

      &.btn-sm,
      &.btn-link.btn-sm {
        width: $grid-unit-y * 4;
        padding-left: 0;
        padding-right: 0;
      }
    }

    @include btn-squared();

    &-lg {
      @include media-breakpoint-only(lg) {
        @include btn-squared();
      }
    }
  }

  &-form-control {
    font-family: $font-family-proxima;
    font-size: $font-size-base;
    border-radius: $input-border-radius;
    width: 100%;
    text-align: left;
    padding-left: $input-padding-base-x;
    padding-right: $input-padding-base-x;
    font-weight: $input-font-weight;

    @include themes(color, input-color);
    @include themes(background-color, input-bg);
    @include themes-border(input-border, 1px);

    &:after {
      @include themes(color, form-select-icon-color);
    }

    &:focus {
      @include themes-value(border-color, $input-border-focus);
    }

    @each $name, $color in $map-harmony-colors {
      &-#{$name} {
        @include button-form-control($color);
      }
    }
  }

  // Size Variations
  // ---------------------

  &-lg {
    @include button-size(
      $btn-lg-padding-y - 1,
      $grid-unit-x * 4 - 2,
      $font-size-large,
      $btn-lg-line-height,
      $btn-border-radius-base
    );
  }

  &-sm {
    @include button-size(
      $btn-sm-padding-y - 1,
      $grid-unit-x * 3 - 1,
      $font-size-large,
      $btn-sm-line-height,
      $btn-border-radius-base
    );
  }

  &-link {
    @include button-size(
      $grid-unit-y,
      $grid-unit-x * 3,
      $font-size-large,
      $grid-unit-y * 3,
      $btn-border-radius-base
    );

    &.btn-lg {
      @include button-size(
        $padding-base-vertical,
        $grid-unit-x * 4,
        $font-size-large,
        $grid-unit-y * 2,
        $btn-border-radius-base
      );
    }

    &.btn-sm {
      @include button-size(
        $padding-small-vertical - 1,
        $padding-large-horizontal,
        $font-size-large,
        $grid-unit-y * 2,
        $btn-border-radius-base
      );
    }
  }

  &-padding-sm {
    padding-left: $grid-unit-x - 1;
    padding-right: $grid-unit-x - 1;
  }

  // Icon Buttons
  // ---------------------

  &-icon {
    @include button-size(
      $padding-small-vertical - 1,
      $padding-base-horizontal,
      $font-size-large,
      $grid-unit-y * 2,
      $btn-border-radius-base
    );

    width: $grid-unit-y * 4;
    padding-left: 0;
    padding-right: 0;

    &:before {
      font-family: $font-family-awesome;
      font-weight: $font-family-awesome-weight;
      display: inline-block;
    }

    .fa,
    .far,
    .fas,
    .fal {
      margin-right: 0;
    }

    &-off {
      &:before {
        content: "\f011";
      }
    }

    &-shapes {
      &:before {
        content: "\f61f";
      }
    }

    &-sign-in {
      &:before {
        content: "\f2f6";
      }
    }

    &-sign-out {
      &:before {
        content: "\f2f5";
      }
    }

    &-file {
      &:before {
        content: "\f07c";
      }
    }

    &-rule {
      &:before {
        content: "\f545";
      }
    }

    &-emoji {
      &:before {
        content: "\f118";
      }
    }

    &-domain {
      &:before {
        content: "\f1b3";
      }
    }

    &-copy {
      &:before {
        content: "\f0ea";
      }
    }

    &-logistic {
      &:before {
        content: "\f0d1";
      }
    }

    &-recovery {
      &:before {
        content: "\f0fa";
      }
    }

    &-mail {
      &:before {
        content: "\f813";
      }
    }

    &-node {
      &:before {
        content: "\f542";
      }
    }

    &-eye {
      &:before {
        content: "\f06e";
      }
    }

    &-database {
      &:before {
        content: "\f1c0";
      }
    }

    &-groups {
      &:before {
        content: "\f5fd";
      }
    }

    &-return {
      &:before {
        content: "\f0e2";
      }
    }

    &-send-all {
      &:before {
        content: "\f14d";
      }
    }

    &-compress {
      &:before {
        content: "\f066";
      }
    }

    &-notch {
      &:before {
        content: "\f1ce";
      }
    }

    &-expand {
      &:before {
        content: "\f31e";
      }
    }

    &-send {
      &:before {
        content: "\f1d8";
      }
    }

    &-scale {
      &:before {
        content: "\f24e";
      }
    }

    &-access {
      &:before {
        content: "\f234";
      }
    }

    &-reporting {
      &:before {
        content: "\f06d";
      }
    }

    &-read {
      &:before {
        content: "\f02d";
      }
    }

    &-chart {
      &:before {
        content: "\f201";
      }
    }

    &-global {
      &:before {
        content: "\f0ac";
      }
    }

    &-cancel {
      &:before {
        content: "\f05e";
      }
    }

    &-save {
      &:before {
        content: "\f0c7";
      }
    }

    &-delete {
      &:before {
        content: "\f1f8";
      }
    }

    &-print {
      &:before {
        content: "\f02f";
      }
    }

    &-edit {
      &:before {
        content: "\f303";
      }
    }

    &-add {
      &:before {
        top: -1px;
        content: "\f067";
      }
    }

    &-right {
      &:before {
        content: "\f138";
      }
    }

    &-left {
      &:before {
        content: "\f137";
      }
    }

    &-remove {
      &:before {
        content: "\f068";
      }
    }

    &-early-warning {
      &:before {
        content: "\f2c8";
      }
    }

    &-barcode {
      &:before {
        content: "\f02a";
      }
    }

    &-binoculars {
      &:before {
        content: "\f1e5";
      }
    }

    &-close {
      &:before {
        content: "\f00d";
      }
    }

    &-check {
      &:before {
        content: "\f00c";
      }
    }

    &-calendar {
      &:before {
        content: "\f073";
      }
    }

    &-comments {
      &:before {
        content: "\f086";
      }
    }
  }
}

a.btn {
  &.disabled,
  fieldset[disabled] & {
    pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
  }
}

// Block button
// ---------------------

.btn-block {
  display: block;
  width: 100%;

  @include text-overflow();
}

// Vertically space out multiple block buttons
.btn-block + .btn-block {
  margin-top: $grid-unit-y;
}

// Specificity overrides
input[type="submit"],
input[type="reset"],
input[type="button"] {
  &.btn-block {
    width: 100%;
  }
}