/*
  Button System
  -------------
  Базовый компонент .ds-btn и вариации оформлены через дизайн-токены из variables.css.
  Чтобы перенести систему в другой проект, скопируйте этот файл вместе с variables.css
  и переопределите токены (цвета, шрифты, тени) в :root.
*/

:root {
  /* Поддержка fallback-проекта без обновлённого variables.css */
}

/* Base button primitive --------------------------------------------------- */
.ds-btn,
.btn,
button.btn-filled,
button.btn-filled-gray,
button.btn-outlined,
a.btn-filled,
a.btn-filled-gray,
a.btn-outlined,
span.btn-filled,
span.btn-filled-gray,
span.btn-outlined {
  font-family: var(--btn-font-family);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-letter-spacing);
  height: var(--height-button);
  min-height: var(--height-button);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--radius-button);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-icon-gap);
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--btn-transition),
    color var(--btn-transition),
    border-color var(--btn-transition),
    box-shadow var(--btn-transition),
    transform var(--btn-transition);
  box-shadow: none;
}

.ds-btn:focus-visible,
.btn:focus-visible,
button.btn-filled:focus-visible,
button.btn-filled-gray:focus-visible,
button.btn-outlined:focus-visible,
a.btn-filled:focus-visible,
a.btn-filled-gray:focus-visible,
a.btn-outlined:focus-visible,
span.btn-filled:focus-visible,
span.btn-filled-gray:focus-visible,
span.btn-outlined:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 var(--btn-focus-ring-width) var(--btn-focus-ring-color),
    inset 0 0 0 var(--btn-focus-ring-offset) var(--btn-focus-ring-inset);
}

.ds-btn[disabled],
.ds-btn[aria-disabled="true"],
.btn[disabled],
.btn[aria-disabled="true"],
button.btn-filled[disabled],
button.btn-filled-gray[disabled],
button.btn-outlined[disabled],
a.btn-filled[aria-disabled="true"],
a.btn-filled-gray[aria-disabled="true"],
a.btn-outlined[aria-disabled="true"],
span.btn-filled[aria-disabled="true"],
span.btn-filled-gray[aria-disabled="true"],
span.btn-outlined[aria-disabled="true"] {
  cursor: not-allowed;
  pointer-events: none;
  background-color: var(--btn-disabled-bg);
  color: var(--btn-disabled-color);
  border-color: var(--btn-disabled-border);
  box-shadow: var(--btn-disabled-shadow);
  opacity: 0.85;
}

/* Icon slot --------------------------------------------------------------- */
.ds-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.ds-btn__icon--leading {
  margin-right: calc(var(--btn-icon-gap) / 2);
}
.ds-btn__icon--trailing {
  margin-left: calc(var(--btn-icon-gap) / 2);
}
.ds-btn__label {
  line-height: 1;
}

.ds-btn--loading {
  pointer-events: none;
  cursor: progress;
}

.ds-btn__spinner {
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: ds-btn-spin 0.7s linear infinite;
}

@keyframes ds-btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Shape modifiers --------------------------------------------------------- */
.ds-btn--pill,
.btn--pill {
  border-radius: var(--radius-button);
}
.ds-btn--input-radius,
.btn--input-radius {
  border-radius: var(--radius-input);
}
.ds-btn--icon-only {
  width: var(--height-button);
  padding-left: 0;
  padding-right: 0;
}

/* Круглая иконка-кнопка без текста: серая, с обводкой и ховером (корзина, удалить и т.п.). Высота как у обычной кнопки. */
.ds-btn--icon-action {
  width: var(--height-button);
  min-width: var(--height-button);
  height: var(--height-button);
  min-height: var(--height-button);
  padding: 0;
  border-radius: 50%;
  background-color: var(--gray-200);
  color: var(--color-text-secondary);
  border: 1px solid var(--gray-300);
  box-shadow: none;
}
.ds-btn--icon-action:hover {
  background-color: var(--gray-300);
  color: var(--gray-900);
  border-color: var(--gray-400);
}
.ds-btn--icon-action .ds-btn__icon {
  display: inline-flex;
  line-height: 1;
}

.ds-btn--block {
  width: 100%;
}

/* Variants ---------------------------------------------------------------- */
.ds-btn--primary,
.btn-filled,
button.btn-filled,
a.btn-filled,
span.btn-filled {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  border-color: var(--btn-primary-border);
  box-shadow: var(--btn-primary-shadow);
}
.ds-btn--primary:hover,
.btn-filled:hover,
button.btn-filled:hover,
a.btn-filled:hover,
span.btn-filled:hover {
  background-color: var(--btn-primary-bg-hover);
  color: var(--btn-primary-color-hover);
}
.ds-btn--primary:active,
.btn-filled:active,
button.btn-filled:active,
a.btn-filled:active,
span.btn-filled:active {
  background-color: var(--btn-primary-bg-active);
  color: var(--btn-primary-color-active);
}

.ds-btn--secondary,
.btn-filled-gray,
button.btn-filled-gray,
a.btn-filled-gray,
span.btn-filled-gray {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-color);
  border-color: var(--btn-secondary-border);
  box-shadow: var(--btn-secondary-shadow);
}
.ds-btn--secondary:hover,
.btn-filled-gray:hover,
button.btn-filled-gray:hover,
a.btn-filled-gray:hover,
span.btn-filled-gray:hover {
  background-color: var(--btn-secondary-bg-hover);
  color: var(--btn-secondary-color-hover);
}
.ds-btn--secondary:active,
.btn-filled-gray:active,
button.btn-filled-gray:active,
a.btn-filled-gray:active,
span.btn-filled-gray:active {
  background-color: var(--btn-secondary-bg-active);
  color: var(--btn-secondary-color-active);
}

.ds-btn--outline,
.btn-outlined,
button.btn-outlined,
a.btn-outlined,
span.btn-outlined {
  background-color: var(--btn-outline-bg);
  color: var(--btn-outline-color);
  border-color: var(--btn-outline-border);
  box-shadow: var(--btn-outline-shadow);
}
.ds-btn--outline:hover,
.btn-outlined:hover,
button.btn-outlined:hover,
a.btn-outlined:hover,
span.btn-outlined:hover {
  background-color: var(--btn-outline-bg-hover);
  color: var(--btn-outline-color-hover);
}
.ds-btn--outline:active,
.btn-outlined:active,
button.btn-outlined:active,
a.btn-outlined:active,
span.btn-outlined:active {
  background-color: var(--btn-outline-bg-active);
  color: var(--btn-outline-color-active);
}

.ds-btn--ghost {
  background-color: var(--btn-ghost-bg);
  color: var(--btn-ghost-color);
  border-color: var(--btn-ghost-border);
  box-shadow: var(--btn-ghost-shadow);
}
.ds-btn--ghost:hover {
  background-color: var(--btn-ghost-bg-hover);
  color: var(--btn-ghost-color-hover);
}
.ds-btn--ghost:active {
  background-color: var(--btn-ghost-bg-active);
  color: var(--btn-ghost-color-active);
}

.ds-btn--danger {
  background-color: var(--btn-danger-bg);
  color: var(--btn-danger-color);
  border-color: var(--btn-danger-border);
  box-shadow: var(--btn-danger-shadow);
}
.ds-btn--danger:hover {
  background-color: var(--btn-danger-bg-hover);
  color: var(--btn-danger-color-hover);
}
.ds-btn--danger:active {
  background-color: var(--btn-danger-bg-active);
  color: var(--btn-danger-color-active);
}

/* Utility: stretch button to full width */
.ds-btn--block {
  width: 100%;
}