/*
 * Shared Button component — loaded after workspace CSS so variants are not
 * flattened by .sk-ui-demo / .document-demo-page generic button resets.
 */

button.sk-component-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-brand);
  font-size: var(--text-button-size);
  font-weight: var(--text-button-weight);
  line-height: var(--text-button-lh);
  border-radius: var(--radius-btn);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
  appearance: none;
}

button.sk-component-btn.btn-size-sm {
  min-height: var(--btn-height-sm);
  padding: 0 var(--space-4);
}

button.sk-component-btn.btn-size-md {
  min-height: var(--btn-height-md);
  padding: 0 var(--space-5);
}

button.sk-component-btn.btn-size-lg {
  min-height: var(--btn-height-lg);
  padding: 0 var(--space-6);
}

button.sk-component-btn.primary-btn {
  background: var(--skilvana-primary-cta);
  color: var(--color-white);
  border: 1px solid transparent;
  box-shadow: var(--shadow-btn);
}

button.sk-component-btn.primary-btn:hover:not(:disabled) {
  background: var(--skilvana-primary-cta-hover);
}

button.sk-component-btn.secondary-btn {
  background: var(--skilvana-section-background);
  color: var(--skilvana-secondary-cta);
  border: 1px solid var(--skilvana-secondary-cta);
}

button.sk-component-btn.secondary-btn:hover:not(:disabled) {
  background: var(--skilvana-page-background);
}

button.sk-component-btn.ghost-btn {
  background: transparent;
  color: var(--skilvana-primary-headings);
  border: 1px solid var(--skilvana-borders-dividers);
}

button.sk-component-btn.ghost-btn:hover:not(:disabled) {
  background: var(--skilvana-page-background);
}

button.sk-component-btn.dark-btn {
  background: var(--skilvana-secondary-cta);
  color: var(--color-white);
  border: 1px solid transparent;
}

button.sk-component-btn.dark-btn:hover:not(:disabled) {
  background: var(--skilvana-secondary-cta-hover);
}

button.sk-component-btn.danger-btn {
  background: var(--danger-bg);
  color: var(--danger-text);
  border: 1px solid var(--danger-border);
}

button.sk-component-btn.danger-btn:hover:not(:disabled) {
  background: var(--danger-hover-bg);
  border-color: var(--danger-hover-border);
  color: var(--danger-hover-text);
}
button.sk-component-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

button.sk-component-btn:focus-visible {
  outline: 2px solid var(--color-accent-800);
  outline-offset: 2px;
}