@mixin button($color) {
  border: 0px none;
  background: $color;

  &:hover,
  &:not(:disabled):not(.disabled):active {
    background: darken($color, 10);
  }
}

.btn {
  text-shadow: 0 0 0;
  font-weight: 300;
  font-size: inherit;
  color: $black;

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

  &.btn-danger {
    @include button($red);
    color: $white;
  }

  &.btn-default {
    @include button($secondary-bg);
    color: $text-default;
  }

  &.btn-lavender {
    background-color: $lavender-dark;
    border-color: $lavender-dark;
    color: $white;

    &:hover,
    &:focus,
    &:focus-visible,
    &:active,
    &:not(:disabled):not(.disabled):active {
      background-color: darken($lavender-dark, 10%);
      border-color: darken($lavender-dark, 10%);
      color: $white;
    }
  }

  &.btn-link {
    background-color: transparent;
    color: $text-link;
    font-size: inherit;
    margin: 0;
    padding: 0;
    text-decoration: none;

    &:hover,
    &:focus-visible,
    &:not(:disabled):not(.disabled):active {
      background-color: transparent;
      color: $text-link-hover;
      text-decoration: none;
    }
  }

  &.btn-outline-info {
    color: darken($green-700, 10%);
    border-color: darken($green-700, 10%);

    &:hover,
    &:focus,
    &:focus-visible,
    &:active,
    &:not(:disabled):not(.disabled):active {
      color: $white;
      border-color: darken($green-700, 10%);
      background: darken($green-700, 10%);
    }
  }

  &.btn-outline-lavender {
    border-color: $lavender-dark;
    color: $lavender-dark;

    &:hover,
    &:focus,
    &:focus-visible,
    &:active,
    &:not(:disabled):not(.disabled):active {
      background-color: $lavender-dark;
      border-color: $lavender-dark;
      color: $white;
    }
  }

  &.btn-outline-primary {
    border-color: $primary;
    color: $primary;

    &:focus,
    &:focus-visible,
    &:active,
    &:not(:disabled):not(.disabled):active {
      border-color: $primary;
      background: $primary;
      color: $white;
    }

    &:hover {
      background: $light;
      border-color: $dark;
      color: $dark;
    }
  }

  &.btn-outline-secondary {
    border-color: $grey-700;
    color: $grey-700;

    &:hover,
    &:focus,
    &:focus-visible,
    &:active,
    &:not(:disabled):not(.disabled):active {
      background: $grey-700;
      border-color: $grey-700;
      color: $white;
    }
  }

  &.btn-outline-success {
    border-color: darken($green-700, 10%);
    color: darken($green-700, 10%);

    &:hover,
    &:focus,
    &:focus-visible,
    &:active,
    &:not(:disabled):not(.disabled):active {
      background-color: darken($green-700, 10%);
      border-color: darken($green-700, 10%);
      color: $white;
    }
  }

  &.btn-outline-warning {
    &:hover,
    &:focus,
    &:focus-visible,
    &:active,
    &:not(:disabled):not(.disabled):active {
      color: $white;
    }
  }

  &.btn-primary,
  &.btn-primary:not(:disabled):not(.disabled).active {
    @include button($primary);
    color: $white;
  }

  &.btn-responsive {
    font-size: 1rem;

    @media (min-width: 992px) {
      font-size: 0.875rem;
      justify-content: center;
      padding: 0.25rem 0.5rem;
      width: 100%;
    }

    @media (min-width: 1400px) {
      font-size: 1rem;
      padding: 0.375rem 0.5rem;
    }

    &.btn-lg {
      @media (min-width: 1200px) and (max-width: 1399px) {
        font-size: 0.9rem;
      }
    }
  }

  &.btn-secondary {
    background-color: $grey-700;
    color: $white;

    &:hover,
    &:focus,
    &:focus-visible,
    &:active,
    &:not(:disabled):not(.disabled):active {
      background-color: $grey-900;
    }
  }

  &.btn-sm {
    font-size: 0.85rem;
  }

  &.btn-success {
    @include button($green);
  }

  &.btn-transparent {
    background: transparent;

    &:not(:disabled):not(.disabled):active {
      background: transparent;
    }
  }

  &.btn-warning {
    @include button($yellow);
  }

  &.btn-xs {
    border-radius: 0.25rem;
    font-size: 0.8rem;
    line-height: 1.4;
    padding: 0.15rem 0.5rem;
  }

  &.dropdown-toggle-split {
    &::after {
      vertical-align: middle;
    }

    & + .dropdown-menu {
      max-width: 19rem;
      padding: 0;
      width: max-content;

      &:hover {
        .dropdown-item,
        .dropdown-item-text {
          background-color: $grey-100;
        }
      }

      .dropdown-item {
        padding: 0.5rem 1.5rem;
      }

      .dropdown-item-text {
        color: $text-default;
        font-size: 0.8rem;
        padding: 0;
        white-space: normal;
      }
    }
  }

  &.rounded-start,
  &.rounded-end {
    // Bootstrap rounds the desired corners, but doesn't square up the rest
    border-radius: 0;
  }
}

.btn-placeholder {
  align-items: center;
  background-color: $primary;
  border: 1px solid $primary;
  border-radius: 0.25rem;
  color: $white;
  cursor: default;
  display: flex;
  padding: 0.375rem 0.75rem;
  text-align: center;
  z-index: 1;

  &.disabled {
    background-color: $grey-200;
    border-color: $grey-500;
    border-left-color: $primary;
    color: $grey-700;
    cursor: not-allowed;

    &:last-child {
      border-radius: 0;
    }
  }
}

.btn-states {
  .dropdown-menu {
    max-width: 20rem;
    width: max-content;
  }

  .dropdown-toggle-split {
    &::after {
      vertical-align: middle;
    }
  }

  span:not(:last-child) {
    .state {
      border-bottom: 1px solid $border-color;
    }
  }

  .state {
    display: flex;
    margin: 0;
    padding: 0.5rem 1.75rem 0.5rem 0.5rem;

    &:has(input:disabled) {
      background-color: $grey-200;
      cursor: not-allowed;

      .state-label {
        p {
          color: $grey-700;
        }
      }
    }

    &:hover {
      background-color: $grey-100;
    }

    i {
      color: transparent;
      margin: 0.25rem 0.25rem 0 0;
    }

    input:checked + i {
      color: $primary;
    }

    .state-label {
      p {
        color: $primary;
        font-size: 1rem;
        margin: 0;
      }

      span {
        font-size: 0.8rem;
      }
    }
  }
}

.show {
  & > .btn-info.dropdown-toggle {
    background-color: darken($green-700, 10%);
    border-color: darken($green-700, 10%);
  }

  & > .btn-primary.dropdown-toggle {
    background-color: $primary;
    border-color: $primary;
  }
}
