.btn {
  @extend %appearance;
  display: inline-block;
  border: 1px solid transparent;
  padding: 10px 30px;
  @include borderRadius(5px);
  @extend %defaultTransition;
  cursor: pointer;

  span {
    font-family: 'iranYekanR';
  }

  &.btn-primary {
    border-color: $theme;
    background-color: $theme;
    color: #fff;

    &:hover {
      background-color: $theme_darker;
      border-color: $theme_darker;
    }

    &:disabled {
      border-color: gray;
      background-color: gray;
      cursor: not-allowed;
    }

    span {
      color: #fff;
    }
  }

  &.btn-secondary {
    padding: 10px 50px;
    @include borderRadius(25px);
    background: #fff;

    &.secondary-reverse {
      background: $theme;
      color: #fff;
    }

    &:disabled {
      border-color: gray;
      background-color: gray;
      cursor: not-allowed;
    }
  }

  &.btn-danger {
    border-color: $red;
    background-color: $red;
    color: #fff;

    &:hover {
      background-color: $red;
      border-color: $red;
    }

    &:disabled {
      border-color: gray;
      background-color: gray;
    }
  }
}