/* DEV: Vendored verbatim copy of @gomining/ds-ui (ui-button/styles.css),
   pinned to the installed v2.1.x. Served statically at /docs/ds/ui-button.css
   for the partner docs page. Do not edit by hand — re-copy from node_modules. */
/* =====================================================================
   GmButtonComponent — UI Button
   Selector: button[gm-button], a[gm-button]
   Global stylesheet (no encapsulation).
   ===================================================================== */

/* ===== Base ===== */

[gm-button] {
  /* Reset */
  appearance: none;
  -webkit-appearance: none;
  border: none;
  outline: none;
  text-decoration: none;

  /* Layout — position: relative нужен для абсолютного позиционирования
     overlay'ев (spinner / skeleton) поверх контента. */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  overflow: hidden;

  /* Typography */
  font-family: var(--gm-font-family-ui);
  font-size: var(--gm-font-size-md);
  font-weight: var(--gm-font-weight-medium);
  line-height: var(--gm-line-height-md);
  letter-spacing: var(--gm-letter-spacing-normal);
  text-transform: none;

  /* Transition */
  transition:
    background-color var(--gm-transition-base),
    border-color var(--gm-transition-base),
    color var(--gm-transition-base),
    opacity var(--gm-transition-base);
}

/* ===== Sizes ===== */

[gm-button][size="lg"] {
  height: var(--gm-ui-btn-height-lg);
  padding: var(--gm-spacing-12) var(--gm-spacing-lg);
  border-radius: var(--gm-radius-lg);
  gap: var(--gm-spacing-sm);
}

[gm-button][size="sm"] {
  height: var(--gm-ui-btn-height-sm);
  padding: var(--gm-spacing-sm) var(--gm-spacing-md);
  border-radius: var(--gm-radius-md);
  gap: var(--gm-spacing-sm);
}

/* Icon-only: симметричные паддинги, ширина = высоте */
[gm-button][size="lg"][square] {
  padding: var(--gm-spacing-12);
  width: var(--gm-ui-btn-height-lg);
}

[gm-button][size="sm"][square] {
  padding: var(--gm-spacing-sm);
  width: var(--gm-ui-btn-height-sm);
}

/* ===== Variants ===== */

/* Primary */
[gm-button][variant="primary"] {
  background-color: var(--gm-bg-accent-purple-solid);
  color: var(--gm-color-white);
}
[gm-button][variant="primary"]:not([disabled]):hover {
  background-color: var(--gm-bg-accent-purple-hover);
}

/* Secondary */
[gm-button][variant="secondary"] {
  background-color: var(--gm-color-grey-10);
  /* text-base-primary — theme-adaptive (dark в light, white в dark);
     раньше использовался static --gm-color-neutral-base + ручной dark-theme
     override. Теперь без override автоматически в обеих темах. */
  color: var(--gm-text-base-primary);
}
[gm-button][variant="secondary"]:not([disabled]):hover {
  background-color: var(--gm-color-grey-20);
}

/* Outline */
[gm-button][variant="outline"] {
  background-color: transparent;
  color: var(--gm-text-base-primary);
  border: 1px solid var(--gm-color-grey-20);
}
[gm-button][variant="outline"]:not([disabled]):hover {
  border-color: var(--gm-color-grey-40);
}

/* Ghost */
[gm-button][variant="ghost"] {
  background-color: transparent;
  color: var(--gm-bg-accent-purple-solid);
}
[gm-button][variant="ghost"]:not([disabled]):hover {
  background-color: var(--gm-color-grey-10);
}

/* Danger */
[gm-button][variant="danger"] {
  background-color: var(--gm-bg-accent-red-solid);
  color: var(--gm-color-white);
}
[gm-button][variant="danger"]:not([disabled]):hover {
  background-color: var(--gm-bg-accent-red-hover);
}

/* Neutral */
[gm-button][variant="neutral"] {
  background-color: var(--gm-color-neutral-base);
  color: var(--gm-color-white);
}
[gm-button][variant="neutral"]:not([disabled]):hover {
  opacity: var(--gm-ui-btn-neutral-hover-opacity);
}

/* Danger Ghost */
[gm-button][variant="danger-ghost"] {
  background-color: transparent;
  color: var(--gm-bg-accent-red-solid);
}
[gm-button][variant="danger-ghost"]:not([disabled]):hover {
  background-color: var(--gm-bg-accent-red-xsubtle);
}

/* ===== Dark theme overrides ===== */
/* Text color теперь через --gm-text-base-primary (theme-adaptive)
   — отдельный override не нужен. Остался только border-color для
   outline-варианта (в dark — белая полупрозрачная рамка). */

[data-theme="dark"] [gm-button][variant="outline"] {
  border-color: var(--gm-border-on-dark-default);
}
[data-theme="dark"] [gm-button][variant="outline"]:not([disabled]):hover {
  border-color: var(--gm-border-on-dark-hover);
}

/* ===== Disabled ===== */

/* Disabled — для <button>-host pointer-events остаётся auto (нативный
   `disabled` блокирует click сам), и tooltip-directive работает на hover.
   Для <a>-host HTML не поддерживает `disabled`, поэтому ставим
   pointer-events: none — это блокирует и click, и hover (tooltip
   не активируется на disabled <a>; обходной путь — обернуть в <span gmTooltip>). */
[gm-button][disabled] {
  cursor: not-allowed;
}

a[gm-button][disabled] {
  pointer-events: none;
}

[gm-button][variant="primary"][disabled] {
  background-color: var(--gm-bg-accent-purple-disabled);
}

[gm-button][variant="danger"][disabled] {
  background-color: var(--gm-bg-accent-red-disabled);
}

/* Disabled text color — secondary/outline/ghost/danger используют text-base-secondary
   (вместо визуального text-base-disabled, который раньше получался из opacity:0.4). */
[gm-button][variant="secondary"][disabled]:not([aria-busy="true"]),
[gm-button][variant="outline"][disabled]:not([aria-busy="true"]),
[gm-button][variant="ghost"][disabled]:not([aria-busy="true"]),
[gm-button][variant="danger"][disabled]:not([aria-busy="true"]) {
  color: var(--gm-text-base-secondary);
}

/* Disabled-opacity не применяем к loading/skeleton (aria-busy="true"),
   иначе спиннер и шиммер становятся еле видимыми на светлых вариантах.
   neutral / danger-ghost остаются на opacity-based dim (не входили в перевод на text-base-secondary). */
[gm-button][variant="danger-ghost"][disabled]:not([aria-busy="true"]),
[gm-button][variant="neutral"][disabled]:not([aria-busy="true"]) {
  opacity: var(--gm-ui-btn-inactive-opacity);
}

/* ===== Focus ===== */

[gm-button]:focus-visible {
  outline: var(--gm-ui-btn-focus-outline-width) solid var(--gm-bg-accent-purple-solid);
  outline-offset: var(--gm-ui-btn-focus-outline-offset);
}

[gm-button][variant="danger"]:focus-visible {
  outline-color: var(--gm-bg-accent-red-solid);
}

/* ===== Content wrapper =====
   Контент всегда в DOM — visibility: hidden когда overlay (loading/skeleton)
   активен. Это сохраняет ширину кнопки при переключении состояний
   (default ↔ skeleton ↔ loader), раньше @else if вынимал content и
   кнопка сжималась до min-width. */

[gm-button] .gm-ui-btn-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Same gap для иконок/текста что и на button host'е (lg=sm=spacing-sm). */
  gap: var(--gm-spacing-sm);
}

[gm-button] .gm-ui-btn-content--hidden {
  visibility: hidden;
}

/* ===== Loading =====
   Спиннер позиционируется поверх content'а (visibility: hidden). */

[gm-button] gm-spinner {
  position: absolute;
  inset: 0;
  /* Override host width/height (var(--_gm-spinner-frame)) — `inset: 0`
     alone не сработает: над-constraint в CSS дропает `right`, спиннер
     якорится в top-left. С `width/height: auto` insets вычислят bbox. */
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* ===== Skeleton =====
   Per Figma: skeleton — это small inner pill размером ~content-area, НЕ
   полный overlay кнопки. Bg кнопки видим вокруг скелетона; placeholder
   занимает место текста (line-height высота, content-area ширина). */

[gm-button] .gm-ui-btn-skeleton {
  position: absolute;
  top: 50%;
  inset-inline-start: var(--gm-spacing-lg);
  inset-inline-end: var(--gm-spacing-lg);
  height: var(--gm-line-height-md);
  margin-top: calc(var(--gm-line-height-md) / -2);
  border-radius: var(--gm-radius-sm);
  pointer-events: none;
  background: linear-gradient(
    90deg,
    var(--_sk-from) 25%,
    var(--_sk-peak) 50%,
    var(--_sk-from) 75%
  );
  background-size: 400% 100%;
  animation: gm-ui-btn-shimmer var(--gm-skeleton-shimmer-duration) ease-in-out infinite;
}

[gm-button][size="sm"] .gm-ui-btn-skeleton {
  inset-inline-start: var(--gm-spacing-md);
  inset-inline-end: var(--gm-spacing-md);
}

/* Square / icon-only — skeleton покрывает icon-area (button minus padding). */
[gm-button][square] .gm-ui-btn-skeleton {
  top: var(--gm-spacing-12);
  inset-inline-start: var(--gm-spacing-12);
  inset-inline-end: var(--gm-spacing-12);
  bottom: var(--gm-spacing-12);
  height: auto;
  margin-top: 0;
  border-radius: var(--gm-radius-md);
}
[gm-button][size="sm"][square] .gm-ui-btn-skeleton {
  top: var(--gm-spacing-sm);
  inset-inline-start: var(--gm-spacing-sm);
  inset-inline-end: var(--gm-spacing-sm);
  bottom: var(--gm-spacing-sm);
}

/* Светлый шиммер — для тёмных bg вариантов (primary, danger, neutral) */
[gm-button][variant="primary"] .gm-ui-btn-skeleton,
[gm-button][variant="danger"] .gm-ui-btn-skeleton,
[gm-button][variant="neutral"] .gm-ui-btn-skeleton {
  --_sk-from: var(--gm-skeleton-on-dark-from);
  --_sk-peak: var(--gm-skeleton-on-dark-peak);
}

/* Тёмный шиммер — для светлых/прозрачных bg вариантов */
[gm-button][variant="secondary"] .gm-ui-btn-skeleton,
[gm-button][variant="outline"] .gm-ui-btn-skeleton,
[gm-button][variant="ghost"] .gm-ui-btn-skeleton,
[gm-button][variant="danger-ghost"] .gm-ui-btn-skeleton {
  --_sk-from: var(--gm-skeleton-on-light-from);
  --_sk-peak: var(--gm-skeleton-on-light-peak);
}

@keyframes gm-ui-btn-shimmer {
  from {
    background-position: 200% center;
  }
  to {
    background-position: -200% center;
  }
}