/*
 * Shared semantic button roles.
 *
 * Stage 4: styling is opt-in by an existing UI role class. Component-owned
 * controls (TopBar, Dropdown, Toolbar, tabs, ScrollToBottom, etc.) are styled
 * by their own owner stylesheet and are intentionally absent from this file.
 */
.ui-button,
.primary-btn,
.secondary-btn,
.destructive-btn,
.ghost-btn,
.icon-btn,
.text-btn,
.shine-btn {
  color: #ffffff;
  background: transparent;
  background-image: none;
  border: 0;
  box-shadow: none;
  text-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    transform 90ms ease,
    box-shadow 90ms ease,
    background-color 90ms ease,
    filter 120ms ease;
}

.ui-button:hover,
.primary-btn:hover,
.secondary-btn:hover,
.destructive-btn:hover,
.ghost-btn:hover,
.icon-btn:hover,
.text-btn:hover,
.shine-btn:hover {
  color: #ffffff;
  background: transparent;
  border: 0;
  box-shadow: none;
  filter: brightness(1.12);
}

.primary-btn:hover,
.secondary-btn:hover,
.destructive-btn:hover,
.ghost-btn:hover,
.icon-btn:hover,
.text-btn:hover,
.shine-btn:hover {
  transform: translateY(-1px);
}

.ui-button:active,
.primary-btn:active,
.secondary-btn:active,
.destructive-btn:active,
.ghost-btn:active,
.icon-btn:active,
.text-btn:active,
.shine-btn:active {
  color: #ffffff;
  background: rgba(0, 0, 0, 0.12);
  border: 0;
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.58),
    inset 0 -1px 2px rgba(255, 255, 255, 0.08);
  transform: translateY(1px) scale(0.97);
  filter: brightness(0.9);
}

.ui-button:disabled,
.primary-btn:disabled,
.secondary-btn:disabled,
.destructive-btn:disabled,
.ghost-btn:disabled,
.icon-btn:disabled,
.text-btn:disabled,
.shine-btn:disabled,
.ui-button[aria-disabled='true'],
.primary-btn[aria-disabled='true'],
.secondary-btn[aria-disabled='true'],
.destructive-btn[aria-disabled='true'],
.ghost-btn[aria-disabled='true'],
.icon-btn[aria-disabled='true'],
.text-btn[aria-disabled='true'],
.shine-btn[aria-disabled='true'] {
  color: rgba(255, 255, 255, 0.42);
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: none;
  filter: none;
}

/* Decorative button pseudo-elements were not part of the Stage 3.1 surface. */
.ui-button::before,
.primary-btn::before,
.secondary-btn::before,
.destructive-btn::before,
.ghost-btn::before,
.icon-btn::before,
.text-btn::before,
.shine-btn::before,
.ui-button::after,
.primary-btn::after,
.secondary-btn::after,
.destructive-btn::after,
.ghost-btn::after,
.icon-btn::after,
.text-btn::after,
.shine-btn::after {
  background: transparent;
  background-image: none;
  border-color: transparent;
  box-shadow: none;
}

.ui-button:focus-visible,
.primary-btn:focus-visible,
.secondary-btn:focus-visible,
.destructive-btn:focus-visible,
.ghost-btn:focus-visible,
.icon-btn:focus-visible,
.text-btn:focus-visible,
.shine-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.62);
  outline-offset: 2px;
}

/* Explicit filled-action variant used by pre-auth/settings/profile screens. */
.filled-action-buttons :is(.primary-btn, .secondary-btn, .destructive-btn, .ghost-btn, .text-btn, .shine-btn, .square-btn, .login-panel-inline-back, .registration-faq-link, .profiles-select, .profiles-close) {
  color: #ffffff;
  background: var(--shine-action-blue);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
  border: 0;
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 8px 22px rgba(var(--shine-action-blue-rgb), 0.24);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.filled-action-buttons :is(.primary-btn, .secondary-btn, .destructive-btn, .ghost-btn, .text-btn, .shine-btn, .square-btn, .login-panel-inline-back, .registration-faq-link, .profiles-select, .profiles-close):hover {
  background: var(--shine-action-blue-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 10px 26px rgba(var(--shine-action-blue-rgb), 0.32);
  filter: brightness(1.12);
}

.filled-action-buttons :is(.primary-btn, .secondary-btn, .destructive-btn, .ghost-btn, .text-btn, .shine-btn, .square-btn, .login-panel-inline-back, .registration-faq-link, .profiles-select, .profiles-close):active {
  background: var(--shine-action-blue-pressed);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.26);
  transform: translateY(1px) scale(0.97);
  filter: brightness(0.9);
}

.filled-action-buttons :is(.primary-btn, .secondary-btn, .destructive-btn, .ghost-btn, .text-btn, .shine-btn, .square-btn, .login-panel-inline-back, .registration-faq-link, .profiles-select, .profiles-close):focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.62);
  outline-offset: 2px;
}

.filled-action-buttons :is(.primary-btn, .secondary-btn, .destructive-btn, .ghost-btn, .text-btn, .shine-btn, .square-btn, .login-panel-inline-back, .registration-faq-link, .profiles-select, .profiles-close)::before,
.filled-action-buttons :is(.primary-btn, .secondary-btn, .destructive-btn, .ghost-btn, .text-btn, .shine-btn, .square-btn, .login-panel-inline-back, .registration-faq-link, .profiles-select, .profiles-close)::after {
  background: transparent;
  background-image: none;
  border-color: transparent;
  box-shadow: none;
}

.filled-action-buttons :is(.primary-btn, .secondary-btn, .destructive-btn, .ghost-btn, .text-btn, .shine-btn, .square-btn, .login-panel-inline-back, .registration-faq-link, .profiles-select, .profiles-close):disabled {
  color: rgba(255, 255, 255, 0.58);
  background: rgba(var(--shine-action-blue-rgb), 0.42);
  box-shadow: none;
}