@use '../variables' as *;
@use '../mixins/outline' as *;

.btn {
  @include outline;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  cursor: pointer;

  border: 1px solid var(--ps-ui-border);
  border-radius: 4px;
  background: $btn-color;

  &:hover:not(:disabled) {
    background: $btn-hover-color;
  }

  &:disabled {
    color: var(--ps-ui-foreground-text);
    color: 1px solid var(--ps-neutral-9);
    pointer-events: none;
  }
}

// inspired by .viz-switch .btn
.btn.primary {
  background-color: var(--ps-green-disabled);
  border-left-color: var(--ps-green-disabled);
  border-right-color: var(--ps-green-disabled);
  border-top-color: var(--ps-green-disabled);
  border-bottom-color: var(--ps-green-disabled);
  transition: 0.3s cubic-bezier(0.17, 0.67, 0.83, 0.67);
  font-weight: 600;

  &:hover {
    background-color: var(--ps-green-primary);
  }
}