.n6-button {
  position: relative;
  font-size: sizeToRem(18);
  font-weight: 500;
  line-height: sizeToRem(22);
  border-radius: $border-radius;
  color: $light-background;
  display: inline-flex;
  justify-content: center;
  align-items: center;

  &:focus {
    box-shadow: none; // remove box-shadow added by bootstrap
  }

  &.focus-visible,
  &.js-focus-visible {
    opacity: 0.8;
  }

  &.primary,
  &.outline {
    padding: sizeToRem(14) sizeToRem(16);
  }

  &.primary {
    color: $light-background;
    background: $primary;
    box-shadow: 0 sizeToRem(10) sizeToRem(20) rgba($primary, 0.15);

    &:hover,
    &:focus {
      color: $light-background;
      background: $primary;
      box-shadow: 0 sizeToRem(25) sizeToRem(30) rgba($primary, 0.2);
    }

    &.loading {
      padding: sizeToRem(25) sizeToRem(16);
    }
  }

  &.outline {
    color: $primary;
    background: $light-background;
    border: sizeToRem(2) solid $primary !important;

    &:hover,
    &:focus {
      color: $primary;
      background: $light-background;
      box-shadow: 0 sizeToRem(10) sizeToRem(20) rgba($primary, 0.3);
    }

    &.loading {
      padding: sizeToRem(25) sizeToRem(16);
    }
  }

  &.secondary {
    background-color: $dark-lighter;
    font-size: 1rem;
    padding: sizeToRem(11) sizeToRem(20);

    &:hover,
    &:focus {
      color: $light-background;
      background: #7d8991;
    }
  }

  &.link {
    color: $primary;
    background: transparent;
    padding: 0;
    font-size: sizeToRem(16);

    &:hover,
    &:focus {
      opacity: 1;
      text-decoration: underline;
    }
  }

  &.disabled {
    cursor: not-allowed;
    opacity: 0.25 !important;
  }

  &.filter {
    font-size: sizeToRem(16);
    font-weight: 400;
    line-height: sizeToRem(20);
    color: $dark;
    background-color: rgba($grey-base, 0.2);
    padding: sizeToRem(8) sizeToRem(16);

    &:hover,
    &:focus {
      background-color: rgba($grey-base, 0.3);
    }
  }

  .n6-button-icon {
    height: sizeToRem(16);
    line-height: 1;

    &.left {
      margin-right: sizeToRem(12);
    }

    &.right {
      margin-left: sizeToRem(12);
      order: 1;
    }

    &.center {
      margin: 0;
    }

    svg {
      height: 100%;
      width: auto;
      vertical-align: baseline;
    }
  }
}

/* OVERRIDE JS FOCUS STYLES FOR BUTTONS */

.js-focus-visible .n6-button.outline:focus {
  border: sizeToRem(2) solid $primary !important;
}
