.ngx-button {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border-radius: 0.25rem;
  cursor: pointer;
  border: 1px solid;
  &.ngx-block {
    width: 100%;
  }
}

button:disabled {
  pointer-events: none;
  opacity: 0.7;
  &.ngx-button-primary {
    background-color: rgb(220, 220, 220);
    border: none;
    &.ngx-danger {
      background-color: #ffc1c1;
    }
    &.ngx-ghost {
      border: 1px solid;
      background-color: transparent;
      color: #1890ff;
    }
  }
}

.ngx-button-primary {
  background-color: #1890ff;
  color: #ffffff;
  border: none;
  &.ngx-danger {
    background-color: #ff4d4f;
  }
  &.ngx-ghost {
    border: 1px solid;
    background-color: transparent;
    color: #1890ff;
  }
  transition: opacity 0.4s ease-out;
  &:hover {
    opacity: 0.75;
  }
}

.ngx-button-default {
  background-color: transparent;
  transition: color 0.4s ease-out;
  color: var(--ngx-button-default-color);
  &.ngx-danger {
    color: #ff4d4f;
  }
  &.ngx-ghost {
    background-color: transparent;
    color: #ffffff;
  }
  &:hover {
    color: #1890ff;
    &.ngx-danger {
      color: #ff4d4f;
    }
  }
}

.ngx-button-dashed {
  background-color: transparent;
  border: 1px dashed;
  color: var(--ngx-button-dashed-color);
  transition: color 0.4s ease-out;
  &.ngx-danger {
    color: #ff4d4f;
  }
  &.ngx-ghost {
    background-color: transparent;
    color: #ffffff;
  }
  &:hover {
    color: #1890ff;
    &.ngx-danger {
      color: #ff4d4f;
    }
  }
}

.ngx-button-text,
.ngx-button-link {
  background-color: transparent;
  border: none;
  color: var(--ngx-button-text-color);
  transition: color 0.4s ease-out;
  &.ngx-danger {
    color: #ff4d4f;
  }
  &.ngx-ghost {
    background-color: transparent;
    color: #ffffff;
  }
  &:hover {
    color: #1890ff;
    &.ngx-danger {
      color: #ff4d4f;
    }
  }
}