button, input[type=submit], .button {
  display: inline-block;
  padding: 0.6rem 2rem;
  background-color: rgba(22, 21, 40, 0.6);
  border: 1px solid rgba(22, 21, 40, 1);
  border-radius: 3px;
  color: $primary-color;
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  letter-spacing: 0.1em;

  &+button, &+input[type=submit], &+.button {
    margin-left: 0.5rem;
  }

  &:hover {
    background-color: rgba(22, 21, 40, 0.8);
  }

  &:active, &.active {
    border-color: $primary-color;
  }

  &.small {
    font-size: 0.8rem;
    padding: 0.2rem 0.8rem;
  }

  &.danger {
    color: $red;
    background-color: rgba(40, 21, 21, 0.6);
    border-color: rgba(40, 21, 21, 1);

    &:hover {
      background-color: rgba(40, 21, 21, 0.8);
    }
    &:active, &.active {
      border-color: $red;
    }
  }

  &.green {
    color: $green;
    background-color: rgba(21, 40, 21, 0.6);
    border-color: rgba(21, 40, 21, 1);

    &:hover {
      background-color: rgba(21, 40, 21, 0.8);
    }
    &:active, &.active {
      border-color: $green;
    }
  }
}