/* ── Base ──────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--uris-spacing-2);
  padding-block: var(--uris-component-btn-padding-block-md);
  padding-inline: var(--uris-component-btn-padding-inline-md);
  min-height: var(--uris-component-btn-min-height-md);
  font-family: var(--uris-font-family-body);
  font-size: var(--uris-component-btn-font-size-md);
  font-weight: var(--uris-font-weight-medium);
  line-height: 1;
  letter-spacing: var(--uris-component-btn-letter-spacing);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--uris-radius-sm);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  transition:
    background-color var(--uris-duration-fast) var(--uris-ease-default),
    border-color     var(--uris-duration-fast) var(--uris-ease-default),
    color            var(--uris-duration-fast) var(--uris-ease-default),
    box-shadow       var(--uris-duration-fast) var(--uris-ease-default),
    filter           var(--uris-duration-fast) var(--uris-ease-default);
}

/* Gradient overlay layer (used by primary hover) */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--uris-duration-fast) var(--uris-ease-default);
}

/* ── Sizes ─────────────────────────────────────────────────────────────────── */
.btn-sm {
  padding-block: var(--uris-component-btn-padding-block-sm);
  padding-inline: var(--uris-component-btn-padding-inline-sm);
  min-height: var(--uris-component-btn-min-height-sm);
  font-size: var(--uris-component-btn-font-size-sm);
  gap: var(--uris-spacing-1);
}

.btn-lg {
  padding-block: var(--uris-component-btn-padding-block-lg);
  padding-inline: var(--uris-component-btn-padding-inline-lg);
  min-height: var(--uris-component-btn-min-height-lg);
  font-size: var(--uris-component-btn-font-size-lg);
  gap: var(--uris-spacing-3);
}

/* ── Type modifiers ────────────────────────────────────────────────────────── */
.btn-icon {
  padding-inline: var(--uris-component-btn-padding-block-md);
  min-width: var(--uris-component-btn-min-height-md);
  gap: 0;
}
.btn-sm.btn-icon {
  padding-inline: var(--uris-component-btn-padding-block-sm);
  min-width: var(--uris-component-btn-min-height-sm);
}
.btn-lg.btn-icon {
  padding-inline: var(--uris-component-btn-padding-block-lg);
  min-width: var(--uris-component-btn-min-height-lg);
}

.btn-full {
  width: 100%;
}

/* ── Icon element ──────────────────────────────────────────────────────────── */
.btn__icon {
  flex-shrink: 0;
  width: var(--uris-text-base-size);
  height: var(--uris-text-base-size);
}
.btn-sm .btn__icon {
  width: var(--uris-text-sm-size);
  height: var(--uris-text-sm-size);
}
.btn-lg .btn__icon {
  width: var(--uris-text-lg-size);
  height: var(--uris-text-lg-size);
}

/* ── Spinner ───────────────────────────────────────────────────────────────── */
.btn__spinner {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--uris-radius-full);
  animation: spinner-rotate var(--uris-duration-spinner) linear infinite;
}

/* ── VARIANT: Primary ──────────────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--uris-color-semantic-primary);
  color: var(--uris-color-semantic-surface);
  border-color: var(--uris-color-semantic-primary);
  /* Solid near-black at rest; hover/active reveal the brand-blue CTA gradient
     (diiaBlue → diiaBlueDeep). background-color is omitted from the transition to
     avoid a transparent flash on mouse-out (CSS can't tween solid ↔ gradient). */
  transition:
    border-color  var(--uris-duration-fast) var(--uris-ease-default),
    color         var(--uris-duration-fast) var(--uris-ease-default),
    box-shadow    var(--uris-duration-fast) var(--uris-ease-default),
    filter        var(--uris-duration-fast) var(--uris-ease-default);
}
.btn-primary:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover {
  background: linear-gradient(
    to right,
    var(--uris-color-semantic-cta-start) 0%,
    var(--uris-color-semantic-cta-end) 100%
  );
  border-color: transparent;
}
.btn-primary:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):active {
  background: linear-gradient(
    to right,
    var(--uris-color-semantic-cta-start) 0%,
    var(--uris-color-semantic-cta-end) 100%
  );
  border-color: transparent;
  filter: brightness(0.92);
}

/* ── VARIANT: Secondary ────────────────────────────────────────────────────── */
.btn-secondary {
  background-color: transparent;
  color: var(--uris-color-semantic-primary);
  border-color: var(--uris-color-semantic-primary);
}
.btn-secondary:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not([aria-pressed="true"]):hover {
  background-color: var(--uris-color-semantic-surface-hover);
}
.btn-secondary:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not([aria-pressed="true"]):active {
  background-color: var(--uris-color-semantic-surface-active);
}

/* ── VARIANT: Accent ───────────────────────────────────────────────────────── */
.btn-accent {
  background-color: var(--uris-color-semantic-signal);
  color: var(--uris-color-semantic-primary);
  border-color: var(--uris-color-semantic-signal);
}
.btn-accent:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover {
  filter: brightness(0.88);
}
.btn-accent:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):active {
  filter: brightness(0.78);
}

/* ── VARIANT: Ghost ────────────────────────────────────────────────────────── */
.btn-ghost {
  background-color: transparent;
  color: var(--uris-color-semantic-accent);
  border-color: transparent;
}
.btn-ghost:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover {
  background-color: var(--uris-color-semantic-info);
}
.btn-ghost:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):active {
  background-color: var(--uris-color-semantic-border);
}

/* ── VARIANT: Quiet ────────────────────────────────────────────────────────── */
/* Нейтральний безрамковий: темний текст як у secondary, але без контуру.
   Прозорий фон, нейтральна сіра заливка на hover/active. Для тригерів
   dropdown, дій у тулбарах і рядках таблиць, де рамка кнопки зайва. */
.btn-quiet {
  background-color: transparent;
  color: var(--uris-color-semantic-primary);
  border-color: transparent;
}
.btn-quiet:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover {
  background-color: var(--uris-color-semantic-surface-hover);
}
.btn-quiet:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):active {
  background-color: var(--uris-color-semantic-surface-active);
}

/* ── VARIANT: Danger ───────────────────────────────────────────────────────── */
.btn-danger {
  background-color: var(--uris-color-semantic-danger);
  color: var(--uris-color-semantic-surface);
  border-color: var(--uris-color-semantic-danger);
}
.btn-danger:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover {
  filter: brightness(0.84);
}
.btn-danger:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):active {
  filter: brightness(0.72);
}
/* focus-visible: глобальне кільце фокуса — _shared/utilities.css */

/* ── Disabled ──────────────────────────────────────────────────────────────── */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn:disabled {
  pointer-events: none;
}

/* ── Loading ───────────────────────────────────────────────────────────────── */
.btn[aria-busy="true"] {
  pointer-events: none;
  cursor: wait;
}

/* ── Error ─────────────────────────────────────────────────────────────────── */
.btn--error {
  box-shadow: 0 0 0 2px var(--uris-color-semantic-danger);
}

/* ── Button group ──────────────────────────────────────────────────────────── */
.btn-group {
  display: inline-flex;
}
.btn-group .btn {
  border-radius: 0;
}
.btn-group .btn:first-child {
  border-start-start-radius: var(--uris-radius-sm);
  border-end-start-radius: var(--uris-radius-sm);
}
.btn-group .btn:last-child {
  border-start-end-radius: var(--uris-radius-sm);
  border-end-end-radius: var(--uris-radius-sm);
}
.btn-group .btn + .btn {
  margin-inline-start: -1px;
}
.btn-group .btn:hover,
.btn-group .btn:focus-visible {
  z-index: 1;
}

/* Selected state in toggle groups */
.btn-group .btn-secondary[aria-pressed="true"] {
  background-color: var(--uris-color-semantic-primary);
  color: var(--uris-color-semantic-surface);
  border-color: var(--uris-color-semantic-primary);
  z-index: 1;
}

/* Pressed button hover — keep filled look, show the brand-blue gradient like primary */
.btn-group .btn-secondary[aria-pressed="true"]:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover {
  background: linear-gradient(
    to right,
    var(--uris-color-semantic-cta-start) 0%,
    var(--uris-color-semantic-cta-end) 100%
  );
  border-color: transparent;
}

/* ── Reduced motion ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn::after {
    transition: none;
  }
  .btn__spinner {
    animation: none;
  }
}