button {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.75rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 300ms ease-out;
  width: fit-content;
  font-family: Manrope, sans-serif;
  text-align: start;

  @media (min-width: $breakpoint_lg) {
    font-size: 1.25rem;
  }

  &.btn-primary {
    padding: 6px 18px;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 50px;
    border: 2px solid $dark_orange;

    &.btn-outlined {
      color: $dark_orange;
      background: none;

      &:hover {
        background: $dark_orange;
        color: $white;
      }
    }

    &.btn-filled {
      background: $dark_orange;
      color: $white;

      &:hover {
        background: none;
        color: $dark_orange;
      }
    }

    &.btn-small {
      font-size: 1rem;
      padding: 8px 20px;
      flex-shrink: 0;

      font-weight: 500;
      line-height: 1.5rem;
    }

    @media (min-width: $breakpoint_lg) {
      padding: 13px 35px;
      flex-shrink: 1;
    }
  }

  &.btn-secondary {
    padding: 8px 0;
    gap: 8px;
    background: none;
    border: none;

    &.btn-black {
      color: $black;
    }

    &.btn-orange {
      color: $dark_orange;
    }

    &:hover {
      color: $dark_green;
    }

  }

  &.disabled, &:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    color: $grey !important;

    &.btn-primary {
      border: 2px solid $grey;
      background: $white !important;
    }
  }

  &:focus {
    outline: none;
  }
}