@import url('./ds-primitives.css?v=20260821-ds-primitives-v1');

/**
 * Legacy button aliases.
 *
 * New UI uses ds-primitives.css (`.nv-button`). These selectors preserve the
 * existing calculator, invoice and auth surfaces on the same tokens/states.
 */

.calculator-btn,
.calculator-button,
.invoice-btn,
.invoice-generate-btn {
  box-sizing: border-box;
  border-radius: var(--button-radius);
  font-family: var(--font-primary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition-property: background-color, border-color, color, opacity, transform;
  transition-duration: var(--transition-fast);
  transition-timing-function: ease-out;
}

.calculator-btn,
.invoice-btn,
.invoice-generate-btn {
  display: inline-flex;
  min-block-size: var(--button-height-md, var(--control-height-md));
  align-items: center;
  justify-content: center;
  gap: var(--button-gap, var(--spacing-sm));
  border: 1px solid transparent;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

.calculator-btn {
  inline-size: 100%;
  padding-inline: var(--button-padding-md, var(--spacing-xl));
  background: var(--color-button-primary);
  color: var(--color-button-primary-text);
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}

.calculator-btn:hover:not(:disabled) {
  background: var(--color-button-primary-hover);
}

.calculator-button {
  min-block-size: var(--button-height-sm, 32px);
  padding-inline: var(--button-padding-sm, var(--spacing-md));
  border: 1px solid transparent;
  background: var(--color-button-secondary);
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  white-space: nowrap;
}

.calculator-button:hover:not(:disabled):not(.locked) {
  border-color: transparent;
  background: var(--color-button-secondary-hover);
  color: var(--color-text-primary);
}

.calculator-button:is(.locked, :disabled) {
  border-color: transparent;
  background: var(--color-button-primary-disabled);
  color: var(--color-button-primary-disabled-text);
  opacity: var(--button-disabled-opacity, 0.62);
  cursor: not-allowed;
}

.calculator-button.locked::after {
  content: "";
  inline-size: var(--button-icon-size, 18px);
  block-size: var(--button-icon-size, 18px);
  flex: 0 0 auto;
  background: currentColor;
  opacity: 0.72;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.invoice-btn {
  min-block-size: var(--button-height-lg, 48px);
  padding-inline: var(--button-padding-lg, var(--spacing-2xl));
  flex: 1;
  font-size: var(--font-size-md);
}

.invoice-btn-preview,
.invoice-btn-secondary,
.invoice-generate-btn {
  border-color: transparent;
  background: var(--color-button-secondary);
  color: var(--color-text-secondary);
}

.invoice-btn-preview:hover:not(:disabled),
.invoice-btn-secondary:hover:not(:disabled),
.invoice-generate-btn:hover:not(:disabled) {
  border-color: transparent;
  background: var(--color-button-secondary-hover);
  color: var(--color-text-primary);
}

.invoice-btn-generate {
  min-inline-size: 7.5rem;
  background: var(--color-button-primary);
  color: var(--color-button-primary-text);
  position: relative;
}

.invoice-btn-generate:hover:not(:disabled):not(.loading) {
  background: var(--color-button-primary-hover);
}

.invoice-generate-btn {
  min-block-size: var(--button-height-sm, 32px);
  padding-inline: var(--button-padding-sm, var(--spacing-md));
  margin-block-start: var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.calculator-btn:active:not(:disabled),
.calculator-button:active:not(:disabled):not(.locked),
.invoice-btn:active:not(:disabled),
.invoice-generate-btn:active:not(:disabled) {
  transform: scale(var(--button-press-scale, 0.96));
}

.calculator-btn:focus-visible,
.calculator-button:focus-visible,
.invoice-btn:focus-visible,
.invoice-generate-btn:focus-visible {
  outline: var(--button-focus-width, 2px) solid var(--color-button-primary-focus);
  outline-offset: var(--button-focus-offset, 3px);
}

.invoice-btn-generate.loading,
.invoice-btn-generate[aria-busy="true"] {
  color: transparent;
  pointer-events: none;
  cursor: wait;
}

.invoice-btn-generate.loading::after,
.invoice-btn-generate[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  box-sizing: border-box;
  inline-size: var(--button-spinner-size, 16px);
  block-size: var(--button-spinner-size, 16px);
  margin: calc(var(--button-spinner-size, 16px) / -2);
  border: 2px solid var(--color-button-primary-text);
  border-inline-end-color: transparent;
  border-radius: var(--radius-circle);
  animation: nv-legacy-button-spin 0.7s linear infinite;
}

@keyframes nv-legacy-button-spin {
  to { transform: rotate(1turn); }
}

@media (max-width: 48rem) {
  .invoice-btn {
    inline-size: 100%;
    min-block-size: var(--control-height-mobile);
  }
}

@media (prefers-reduced-motion: reduce) {
  .calculator-btn,
  .calculator-button,
  .invoice-btn,
  .invoice-generate-btn {
    transition-duration: 0.01ms;
  }

  .calculator-btn:active:not(:disabled),
  .calculator-button:active:not(:disabled):not(.locked),
  .invoice-btn:active:not(:disabled),
  .invoice-generate-btn:active:not(:disabled) {
    transform: none;
  }
}

@media (forced-colors: active) {
  .calculator-btn,
  .calculator-button,
  .invoice-btn,
  .invoice-generate-btn {
    border: 1px solid ButtonText;
  }
}