.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 20px;
  text-align: center;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 20px;
  transition: 0.3s;
  cursor: pointer;
  @include media-hover {
    color: $primary1;
    border-color: $primary1;
  }
  &[disabled] {
    color: inherit;
    background-color: $background1;
    border-color: $background1;
    pointer-events: none;
    opacity: 0.8;
  }
  &--bg-primary1 {
    color: #fff;
    background: $primary1;
    @include media-hover {
      color: $primary1;
      background: #fff;
    }
  }
  &--border-primary1 {
    border: 1px solid $primary1;
  }
}
