a.btn,
button,
span.btn,
input[type="submit"] {
  padding: 12px 24px;
  text-align: center;
  color: white;
  font-weight: bold;
  border: none;
  cursor: pointer;
  outline: none;
  display: inline-block;
  font-size: 16px;
  background: $primary;
  border-radius: 8px;
  transition: 0.2s;
  text-transform: capitalize;
  text-wrap: nowrap;

  &:hover {
    background: darken($primary, 5);
  }

  &.\-\-small {
    padding: 8px 16px;
    font-size: 14px;
  }

  &.\-\-flex {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  &.\-\-white {
    background: $white;
    color: $black;
    border: 2px solid $black-10;

    &:hover {
      background: darken($white, 5);
    }
  }

  &.\-\-primary-dark {
    background: $primary-dark;
    color: $white;

    &:hover {
      background: darken($primary-dark, 5);
    }
  }

  &.\-\-large {
    padding: 15px 90px;
  }

  &.\-\-full {
    width: 100%;
  }

  &.\-\-disable,  &:disabled {
    background: $black-50;
    cursor: not-allowed;
  }
}

@media only screen and (max-width: 926px) {
  a.btn,
  button,
  span.btn,
  input[type="submit"] {
    font-size: 14px;

    &:hover {
      background: darken($primary, 5);
    }

    &.\-\-small {
      padding: 8px 8px 8px 10px;
      font-size: 12px;
    }

    &.\-\-flex {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    &.\-\-white {
      background: $white;
      color: $black;
      border: 2px solid $black-10;

      &:hover {
        background: darken($white, 5);
      }
    }

    &.\-\-primary-dark {
      background: $primary-dark;
      color: $white;

      &:hover {
        background: darken($primary-dark, 5);
      }
    }

    &.\-\-disable,  &:disabled {
      background: $black-50;
      cursor: not-allowed;
    }
  }
}