$primary-zeyi: #FCD404;

.zui-button {
  color: #323233;
  background-color: #fff;
  border: 1px solid #ebedf0;
  padding: 0.25rem 1rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 70ms;
  display: flex;
  align-items: center;
  justify-content: center;
  &.sm {
    padding: 0.125rem 0.25rem;
    font-size: 0.625rem;
  }
  &.lg {
    padding: 0.625rem 1.25rem;
    font-size: 1.125rem;
  }
  &:active {
    background-color: #e6e6e6;
    border-color: #e6e6e6;
  }
  &.primary {
    background-color: $primary-zeyi;
    border-color: $primary-zeyi;
    color: #FFF;
    &:active {
      background-color: darken($primary-zeyi, 3%);
      border-color: darken($primary-zeyi, 3%);
    }
  }
  &.secondary {
    color: $primary-zeyi;
    background-color: rgba($primary-zeyi, 7%);
    border-color: rgba($primary-zeyi, 7%);
    &:active {
      background-color: rgba($primary-zeyi, 20%);
    border-color: rgba($primary-zeyi, 20%);
    }
  }
  &.link {
    padding: 0.25rem 1rem;
    background: inherit;
    border: inherit;
    color: $primary-zeyi;
    &:active {
      color: darken($primary-zeyi, 3%);
    }
  }
  &.disabled {
    border-color: #f5f5f5;
    background-color: #f5f5f5;
    color: #ccc;
    cursor: not-allowed;
    &:active {
      border-color: #f5f5f5;
      background-color: #f5f5f5;
    }
  }
}