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;
  -webkit-appearance: none;

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

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

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

  &[disabled] {
    color: rgba(255,255,255,0.5);
  }

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

  &.danger:not(:disabled) {
    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);
    }
    &:focus, &:active, &.active {
      border-color: $red;
    }
  }

  &.green:not(:disabled) {
    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);
    }
    &:focus, &:active, &.active {
      border-color: $green;
    }
  }

  &.icon {
    svg {
      width: 2rem;
      height: 2rem;
      vertical-align: middle;
      margin-right: 1rem;

      .fg {
        fill: $primary-color;
      }
    }
  }
}