$ui-button-hover-alpha: 0.84;

@mixin button() {
  @include ui-font-specter-bold;
  display: inline-block;
  box-sizing: border-box;
  padding: 4px 24px;

  color: ui-color(paper-ink-dark);
  font-size: 13px;
  line-height: 30px;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;

  cursor: pointer;

  transition: border 0.1s linear, color 0.1s linear, background 0.1s linear;

  -webkit-appearance: none;

  // Display
  &--block {
    display: block;
    width: 100%;
  }

  &--round {
    border-radius: 50px; // Switched from 100% to 50px: certain button rendered as ovals with the 100% value
  }

  &--block-mobile {
    display: block;
    width: 100%;

    @include ui-from($ui-bp-tablet) {
      display: inline-block;
      width: auto;
    }
  }

  &--fitted {
    min-width: auto;
  }

  &:disabled {
    cursor: not-allowed;

    pointer-events: none;
  }
}

@mixin ui-btn-focus($color, $opacity: 0.4) {
  &:focus {
    outline: 0;
    box-shadow: 0 0 0 4px rgba($color, $opacity);
  }
}

@mixin ui-btn-sizes() {
  &--xxl {
    min-width: 160px;
    padding: 2px 32px;

    font-size: 17px;
    line-height: 58px;

    &.ui-btn--round {
      min-width: 60px;
    }
  }

  &--xl {
    min-width: 120px;
    padding: 4px 28px;

    font-size: 15px;
    line-height: 40px;

    &.ui-btn--round {
      min-width: 42px;
    }
  }

  &--lg {
    min-width: 100px;
    padding: 5px 24px;

    font-size: 15px;
    line-height: 35px;

    &.ui-btn--round {
      min-width: 37px;
      padding: 0;
    }
  }

  &--md {
    min-width: 100px;
    padding: 4px 24px;

    font-size: 13px;
    line-height: 30px;

    &.ui-btn--round {
      min-width: 32px;
      padding: 0;
    }
  }

  &--sm {
    min-width: 50px;
    padding: 2px 12px;

    font-size: 12px;
    line-height: 25px;

    &.ui-btn--round {
      min-width: 27px;
      padding: 0;
    }
  }
}

@mixin ui-br-btn-sizes() {
  &--xxl {
    min-width: 144px;
    padding: 18px 32px;

    font-size: 20px;
    line-height: 28px;

    &.ui-btn--round {
      min-width: 64px;
      height: 64px;
      padding: 0;

      font-size: 28px;
    }
  }

  &--xl {
    min-width: 104px;
    padding: 11px 24px;

    font-size: 16px;
    line-height: 24px;

    &.ui-btn--round {
      min-width: 48px;
      height: 48px;
      padding: 0;

      font-size: 20px;
    }
  }

  &--lg {
    min-width: 76px;
    padding: 9px 24px;

    font-size: 14px;
    line-height: 22px;

    &.ui-btn--round {
      min-width: 40px;
      height: 40px;
      padding: 0;

      font-size: 16px;
    }
  }

  &--md {
    min-width: 76px;
    padding: 9px 24px;

    font-size: 14px;
    line-height: 22px;

    &.ui-btn--round {
      min-width: 40px;
      height: 40px;
      padding: 0;

      font-size: 16px;
    }
  }

  &--sm {
    min-width: 48px;
    padding: 7px 12px;

    font-size: 12px;
    line-height: 18px;

    &.ui-btn--round {
      min-width: 32px;
      height: 32px;
      padding: 0;

      font-size: 12px;
    }
  }
}

.ui-btn {
  @include button();

  @include ui-br-btn-sizes();

  border: 2px solid transparent;

  transition: linear 0.1s;

  // Button Types
  &__primary {
    color: ui-color(natural);

    background-color: ui-color(blue);

    &--pulse {
      animation: ui-btn__primary--pulse 5s infinite linear;
    }

    &--beacon {
      animation: ui-btn__primary--beacon 3s infinite ease;
    }

    &:hover,
    &.ui-btn-round:hover {
      color: ui-color(natural);

      background-color: rgba(ui-color(blue), $ui-button-hover-alpha);
    }

    &--inverse,
    &--light {
      color: ui-color(blue);

      background-color: ui-color(coral);

      &:hover,
      &.ui-btn-round:hover {
        background-color: rgba(ui-color(coral), $ui-button-hover-alpha);
      }
    }
  }

  &__secondary {
    &--light,
    &--medium {
      color: ui-color(blue);

      background: transparent;

      border-color: ui-color(blue);

      &:hover,
      &.ui-btn-round:hover {
        border-color: rgba(ui-color(blue), $ui-button-hover-alpha);
        box-shadow: inset 0 0 0 2px rgba(ui-color(blue), $ui-button-hover-alpha);
      }
    }

    &--dark {
      color: ui-color(coral);

      background: transparent;

      border-color: ui-color(coral);

      &:hover,
      &.ui-btn-round:hover {
        border-color: rgba(ui-color(coral), $ui-button-hover-alpha);
        box-shadow: inset 0 0 0 2px
          rgba(ui-color(coral), $ui-button-hover-alpha);
      }
    }
  }

  /* ui-btn__link
    - Created for buttons with link like styles. May have buttons
    that do more than just linking (`a` or `Link`) but still attain
    the styles of a link tag.
  */
  &__link {
    display: inline;
    margin: 0;
    padding: 0;

    font: inherit;
    text-transform: inherit; // trumps overrides ui-btn text-transform: uppercase
    vertical-align: inherit; // trumps overrides ui-btn vertical-align: middle

    background: none;
    border: none;
    outline: 0;
    cursor: pointer;
  }

  &__inactive {
    &--light,
    &--dark {
      &:focus {
        outline: 0;
      }
    }

    &--light,
    &--dark {
      color: ui-color(gray-dark) !important;

      background: ui-color(gray-light) !important;

      &:focus {
        outline: 0;
        box-shadow: none;
      }

      &:hover {
        cursor: not-allowed;
      }
    }

    &--no-hover {
      color: ui-color(gray-dark);

      background: ui-color(gray-light);

      &:focus {
        outline: 0;
        box-shadow: none;
      }

      &:hover {
        color: ui-color(gray-dark) !important;

        background: ui-color(gray-light) !important;
        cursor: not-allowed;
      }
    }
  }

  &__ghost {
    &--light,
    &--dark {
      @include ui-font-specter-bold;
      background: transparent;
    }

    &--light {
      color: ui-color(blue);
    }

    &--dark {
      color: ui-color(coral);
    }
  }

  &:focus {
    outline: Highlight auto;
    outline: -webkit-focus-ring-color auto;
  }

  &__danger {
    color: ui-color(natural);

    background-color: ui-color(blue);

    &:hover,
    &.ui-btn-round:hover {
      background-color: rgba(ui-color(blue), $ui-button-hover-alpha);
    }
  }

  &:disabled {
    color: ui-color(gray-dark);

    background: ui-color(gray-light);
    border-color: transparent;

    &:focus {
      outline: 0;
      box-shadow: none;
    }

    &:hover {
      cursor: not-allowed;
    }
  }

  &--icon {
    margin-left: 8px;
  }
}

.ui-btn-group {
  &--block {
    display: flex;
  }
}

.ui-btn-save {
  min-width: 95px;
}