/*
 * Roca Professionals, participant site and cabinet: buttons and the action bar pinned to the bottom.
 * The mockup: section 04 Кнопки of Дизайн-система (Claude Design).
 *
 * A variant only swaps the private --_btn-* values; the states below read them, so every variant gets
 * hover, pressed, focus, disabled and loading without its own copies of those rules.
 * is-hover / is-pressed / is-focus repeat the native states for the component page (no JS there).
 */

.rp-btn {
  --_btn-bg: var(--rp-action);
  --_btn-bg-hover: var(--rp-action-hover);
  --_btn-bg-pressed: var(--rp-action-pressed);
  --_btn-fg: var(--rp-on-accent);
  --_btn-fg-hover: var(--_btn-fg);
  --_btn-fg-pressed: var(--_btn-fg);
  --_btn-line: transparent;
  --_btn-ring: var(--rp-focus);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rp-sp-2);
  max-width: 100%;
  min-height: var(--rp-btn-h);
  margin: 0;
  padding: var(--rp-sp-3) var(--rp-sp-6);
  border: 0;
  border-radius: var(--rp-r-control);
  background: var(--_btn-bg);
  color: var(--_btn-fg);
  box-shadow: inset 0 0 0 var(--rp-bw) var(--_btn-line);
  font-family: var(--rp-font);
  font-size: var(--rp-fs-body);
  font-weight: var(--rp-fw-medium);
  line-height: var(--rp-lh-snug);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  overflow-wrap: anywhere;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: transform var(--rp-dur-fast) var(--rp-ease);
}

.rp-btn .rp-icon {
  flex: none;
}

/* A link button: the base a:hover colour must not reach it, also after a tap on a touch screen. */
.rp-btn:hover {
  color: var(--_btn-fg);
}

/* Sticky hover after a tap on a phone looks like a stuck button, so real hover only where there is a pointer. */
@media (hover: hover) {
  .rp-btn:hover {
    background: var(--_btn-bg-hover);
    color: var(--_btn-fg-hover);
  }

  .rp-btn:hover .rp-btn__arrow {
    transform: translateX(var(--rp-sp-1));
  }
}

.rp-btn.is-hover {
  background: var(--_btn-bg-hover);
  color: var(--_btn-fg-hover);
}

.rp-btn.is-hover .rp-btn__arrow {
  transform: translateX(var(--rp-sp-1));
}

.rp-btn:active,
.rp-btn.is-pressed {
  background: var(--_btn-bg-pressed);
  color: var(--_btn-fg-pressed);
  transform: scale(.98);
}

.rp-btn:focus-visible,
.rp-btn.is-focus {
  outline: none;
  box-shadow: inset 0 0 0 var(--rp-bw) var(--_btn-line), var(--_btn-ring);
}

/* The arrow of a link-action moves on hover. */
.rp-btn__arrow {
  transition: transform var(--rp-dur-fast) var(--rp-ease);
}

/* ---- Variants --------------------------------------------------------------------------------- */

.rp-btn--secondary {
  --_btn-bg: var(--rp-surface);
  --_btn-bg-hover: var(--rp-bg);
  --_btn-bg-pressed: var(--rp-surface-sunken);
  --_btn-fg: var(--rp-text);
  --_btn-line: var(--rp-line-strong);
}

.rp-btn--text {
  --_btn-bg: transparent;
  --_btn-bg-hover: transparent;
  --_btn-bg-pressed: var(--rp-accent-soft);
  --_btn-fg: var(--rp-accent);
  --_btn-fg-hover: var(--rp-accent-hover);
  --_btn-fg-pressed: var(--rp-accent-pressed);

  gap: var(--rp-sp-1);
  min-height: var(--rp-tap);
  padding: var(--rp-sp-2) var(--rp-sp-3);
}

.rp-btn--danger {
  --_btn-bg: var(--rp-danger);
  --_btn-bg-hover: var(--rp-danger-pressed);
  --_btn-bg-pressed: var(--rp-danger-pressed);
  --_btn-ring: var(--rp-focus-danger);
}

/* On the dark band or the first screen of the site: white fill, ink text. */
.rp-btn--inverse {
  --_btn-bg: var(--rp-surface);
  --_btn-bg-hover: var(--rp-paper);
  --_btn-bg-pressed: var(--rp-stone);
  --_btn-fg: var(--rp-text);
}

/* Over a photo: a translucent white outline that fills white on hover. */
.rp-btn--on-media {
  --_btn-bg: transparent;
  --_btn-bg-hover: var(--rp-surface);
  --_btn-bg-pressed: var(--rp-paper);
  --_btn-fg: var(--rp-text-inverse);
  --_btn-fg-hover: var(--rp-text);
  --_btn-fg-pressed: var(--rp-text);
  --_btn-line: var(--rp-line-on-media);
}

/* A square 44 x 44 button with one icon; it needs aria-label. */
.rp-btn--icon {
  --_btn-bg: transparent;
  --_btn-bg-hover: var(--rp-accent-soft);
  --_btn-bg-pressed: var(--rp-accent-soft-strong);
  --_btn-fg: var(--rp-text);

  width: var(--rp-tap);
  height: var(--rp-tap);
  min-height: var(--rp-tap);
  padding: 0;
}

.rp-btn--icon.rp-btn--danger {
  --_btn-bg: transparent;
  --_btn-bg-hover: var(--rp-danger-soft);
  --_btn-bg-pressed: var(--rp-danger-soft);
  --_btn-fg: var(--rp-danger);
}

/* ---- Sizes ------------------------------------------------------------------------------------ */

.rp-btn--sm {
  min-height: var(--rp-btn-h-sm);
  padding: var(--rp-sp-2) var(--rp-sp-4);
  font-size: var(--rp-fs-small);
}

/* The admin area only: desktop, a mouse, dense tables. */
.rp-btn--admin {
  min-height: var(--rp-btn-h-admin);
  padding: var(--rp-sp-1) var(--rp-sp-3);
  font-size: var(--rp-fs-small);
}

.rp-btn--block {
  display: flex;
  width: 100%;
}

/* Two buttons of equal width in one row (Сохранить черновик + Отправить повторно). */
.rp-btn-row {
  display: flex;
  gap: var(--rp-sp-3);
}

.rp-btn-row > .rp-btn {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: var(--rp-sp-3);
}

/* ---- Disabled and loading: after the variants, so they win over the variant values ------------ */

.rp-btn:disabled,
.rp-btn[aria-disabled="true"] {
  --_btn-bg: var(--rp-disabled-bg);
  --_btn-bg-hover: var(--rp-disabled-bg);
  --_btn-bg-pressed: var(--rp-disabled-bg);
  --_btn-fg: var(--rp-disabled-text);
  --_btn-fg-hover: var(--rp-disabled-text);
  --_btn-fg-pressed: var(--rp-disabled-text);
  --_btn-line: transparent;

  cursor: not-allowed;
  transform: none;
}

.rp-btn:disabled .rp-btn__arrow,
.rp-btn[aria-disabled="true"] .rp-btn__arrow {
  transform: none;
}

.rp-btn--secondary:disabled,
.rp-btn--secondary[aria-disabled="true"],
.rp-btn--text:disabled,
.rp-btn--text[aria-disabled="true"],
.rp-btn--icon:disabled,
.rp-btn--icon[aria-disabled="true"],
.rp-btn--on-media:disabled,
.rp-btn--on-media[aria-disabled="true"] {
  --_btn-bg: transparent;
  --_btn-bg-hover: transparent;
  --_btn-bg-pressed: transparent;
}

.rp-btn--secondary:disabled,
.rp-btn--secondary[aria-disabled="true"] {
  --_btn-line: var(--rp-disabled-bg);
}

.rp-btn--on-media:disabled,
.rp-btn--on-media[aria-disabled="true"] {
  --_btn-line: var(--rp-line-inverse);
}

/*
 * Loading keeps the colours and swaps the icon for a spinner; the script changes the label (Записываем).
 * pointer-events stops a second tap; the script still has to ignore Enter while aria-busy is set.
 */
.rp-btn.is-loading,
.rp-btn[aria-busy="true"] {
  pointer-events: none;
  cursor: progress;
}

.rp-btn.is-loading::before,
.rp-btn[aria-busy="true"]::before {
  content: "";
  flex: none;
  width: var(--rp-icon-sm);
  height: var(--rp-icon-sm);
  border: var(--rp-bw-strong) solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: rp-spin var(--rp-dur-spin) linear infinite;
}

.rp-btn.is-loading .rp-icon,
.rp-btn[aria-busy="true"] .rp-icon {
  display: none;
}

/* ---- The action bar pinned to the bottom of a phone screen ------------------------------------ */

/*
 * Above the home indicator: the safe area is added below the button. With the keyboard open the script
 * keeps the bar above it (visualViewport) and sets is-keyboard: the safe area is under the keyboard then.
 * The page under the bar needs bottom padding of the bar height, or the last field hides behind it.
 */
.rp-action-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 10;
  display: grid;
  gap: var(--rp-sp-3);
  padding: var(--rp-sp-3) var(--rp-gutter-m) calc(var(--rp-sp-3) + var(--rp-safe-bottom));
  background: var(--rp-surface);
  box-shadow: inset 0 var(--rp-bw) 0 var(--rp-line), var(--rp-sh-bar);
}

.rp-action-bar.is-keyboard {
  padding-bottom: var(--rp-sp-3);
}

/* In the flow: on the component page, or at the end of a form on a wide screen. */
.rp-action-bar--static {
  position: relative;
  z-index: auto;
}