.bz-btn {
  align-items: center;
  background-color: $bz-theme-400;
  border: 1px solid transparent;
  border-radius: $bz-border-radius-m;
  color: $bz-neutral-100;
  cursor: pointer;
  display: inline-flex;
  font-size: $bz-font-size-body;
  font-weight: $bz-font-weight-semibold;
  line-height: 1.5; // You can define your line-height without a unit of measurement and the browser will do all the hard math for you.
  padding: $bz-space-inset-squish-default;
  white-space: normal;
  word-break: break-all;
  word-wrap: break-word;

  &[disabled] {
    background-color: $bz-neutral-300;
    border-color: transparent;
    color: $bz-neutral-500;
    cursor: auto;
    pointer-events: none;
  }

  &:hover,
  &:focus {
    outline: none;
  }

  &:hover:not([disabled]) {
    background-color: $bz-theme-500;
  }

  &:active:not([disabled]) {
    background-color: $bz-theme-600;
  }

  .bz-icn {
    fill: $bz-neutral-100;
  }

  &--info {
    background-color: $bz-color-state-info;

    &:hover:not([disabled]) {
      background-color: darken($bz-color-state-info, 5%);
    }
  }

  &--success {
    background-color: $bz-color-state-success;

    &:hover:not([disabled]) {
      background-color: darken($bz-color-state-success, 5%);
    }
  }


  &--warning {
    background-color: $bz-color-state-warning;

    &:hover:not([disabled]) {
      background-color: darken($bz-color-state-warning, 5%);
    }
  }

  &--error {
    background-color: $bz-color-state-error;

    &:hover:not([disabled]) {
      background-color: darken($bz-color-state-error, 5%);
    }
  }

  &--secondary {
    background-color: transparent;
    border-color: $bz-theme-400;
    color: $bz-theme-400;

    .bz-icn {
      fill: $bz-theme-400;
    }

    &[disabled] {
      background-color: transparent;
      border-color: $bz-neutral-300;
      color: $bz-neutral-500;
      cursor: auto;
      pointer-events: none;

      .bz-icn {
        fill: $bz-neutral-400;
      }
    }

    &:hover:not([disabled]) {
      background-color: transparent;
      border-color: $bz-theme-500;
      color: $bz-theme-500;

      .bz-icn {
        fill: $bz-theme-500;
      }
    }

    &:active:not([disabled]) {
      background-color: transparent;
      border-color: $bz-theme-500;
      color: $bz-theme-500;

      .bz-icn {
        fill: $bz-theme-500;
      }
    }

    &.bz-btn--error {
      background-color: $bz-neutral-100;
      border-color: $bz-color-state-error;
      color: $bz-color-state-error;

      .bz-icn {
        fill: $bz-color-state-error;
      }

      &:hover:not([disabled]) {
        border-color: $bz-color-state-error;
        background-color: rgba($bz-color-state-error, 0.05);
        color: $bz-color-state-error;
      }
    }

    &.bz-btn--warning {
      background-color: $bz-neutral-100;
      border-color: $bz-color-state-warning;
      color: $bz-color-state-warning;

      .bz-icn {
        fill: $bz-color-state-warning;
      }

      &:hover:not([disabled]) {
        border-color: $bz-color-state-warning;
        background-color: rgba($bz-color-state-warning, 0.05);
        color: $bz-color-state-warning;
      }
    }

    &.bz-btn--success {
      background-color: $bz-neutral-100;
      border-color: $bz-color-state-success;
      color: $bz-color-state-success;

      .bz-icn {
        fill: $bz-color-state-success;
      }

      &:hover:not([disabled]) {
        border-color: $bz-color-state-success;
        background-color: rgba($bz-color-state-success, 0.05);
        color: $bz-color-state-success;
      }
    }

    &.bz-btn--info {
      background-color: $bz-neutral-100;
      border-color: $bz-color-state-info;
      color: $bz-color-state-info;

      .bz-icn {
        fill: $bz-color-state-info;
      }

      &:hover:not([disabled]) {
        border-color: $bz-color-state-info;
        background-color: rgba($bz-color-state-info, 0.05);
        color: $bz-color-state-info;
      }
    }
  }

  &--white {
    background-color: transparent;
    border-color: transparent;
    color: $bz-neutral-500;

    .bz-icn {
      fill: $bz-neutral-500;
    }

    &:hover:not([disabled]) {
      background-color: transparent;
    }

    &:active:not([disabled]) {
      background-color: transparent;
    }
  }

  &--light {
    .bz-icn {
      fill: $bz-neutral-100;
    }
    &:hover:not([disabled]) {
      background-color: rgba($bz-neutral-100, 0.25);
      .bz-icn {
        fill: $bz-neutral-100;
      }
    }
  }

  &--white-secondary {
    background-color: transparent;
    border-color: transparent;
    color: $bz-theme-400;

    .bz-icn {
      fill: $bz-theme-400;
    }

    &:hover:not([disabled]) {
      background-color: transparent;
    }

    &:active:not([disabled]) {
      background-color: transparent;
    }
  }

  &--s {
    font-size: $bz-font-size-body-small;
    line-height: 16px;
    padding: $bz-space-inset-squish-xs;
  }

  &--m {
    font-size: $bz-font-size-body;
    padding: $bz-space-inset-squish-s;
  }

  &--right {
    border-radius: 0 4px 4px 0;
  }

  &--left {
    border-radius: 4px 0 0 4px;
  }

  &--full {
    width: 100%;
    justify-content: center;
  }
}

a.bz-btn {
  text-decoration: none;

  &:visited, &:hover, &:active {
    color: $bz-neutral-100;
  }
}

.bz-btn-group {
  display: inline-flex;
}

.bz-btn-icn {
  align-items: center;
  background-color: transparent;
  border: 0;
  border-radius: $bz-border-radius-l;
  cursor: pointer;
  display: flex;
  height: 16px;
  justify-content: center;
  padding: 0;
  width: 16px;

  &[disabled] {
    background-color: transparent;
    cursor: auto;
    pointer-events: none;

    &:hover {
      .bz-icn {
        fill: $bz-neutral-300;
      }
    }

    .bz-icn {
      fill: $bz-neutral-300;
    }
  }

  &--16 {
    height: 16px;
    min-height: 16px;
    min-width: 16px;
    width: 16px;
  }

  &--24 {
    height: 24px;
    min-height: 24px;
    min-width: 24px;
    width: 24px;
  }

  &--32 {
    height: 32px;
    min-height: 32px;
    min-width: 32px;
    width: 32px;
  }

  &--40 {
    height: 40px;
    min-height: 40px;
    min-width: 40px;
    width: 40px;
  }

  &:hover {
    border-radius: $bz-border-radius-l;
    .bz-icn {
      fill: $bz-theme-400;
    }
  }



  &--active:not([disabled]) {
    background-color: rgba($bz-neutral-400, .15);
    border-radius: $bz-border-radius-l;

    .bz-icn {
      fill: $bz-theme-400;
    }
  }

  &--filled {
    background-color: $bz-theme-400;

    &:hover:not([disabled]) {
        background-color: $bz-theme-500;
        .bz-icn {
          fill: $bz-neutral-100;
        }
    }

    &[disabled] {
        background-color: $bz-neutral-300;
        border-color: transparent;
        color: $bz-neutral-500;
        cursor: auto;
        pointer-events: none;

        .bz-icn {
          fill: $bz-neutral-100;
        }
    }

    .bz-icn {
      fill: $bz-neutral-100;
    }
  }
}