/* One action palette across the legacy, public and member component families.
 * Keep each component's layout, sizing and behavior. Explicit action selectors
 * exclude tabs, dropdowns, toggles, trade direction and feedback states.
 * Important declarations in this named layer intentionally precede the many
 * unlayered page-specific important color overrides, regardless of asset order.
 * New action components can opt in with .px-action.
 */
@layer piplix-actions {
  /* Semantic action states keep their colors, with the same corner shape. */
  :is(.btn-danger, .btn-outline-danger, .px-btn--success, .px-btn--danger,
    .px-tst-btn--danger, .tl-btn--danger, .tl-ui-button--danger, .px-product-dialog button.is-danger) {
    border-radius: var(--px-action-radius) !important;
  }
  :is(
    .px-action,
    .btn-primary, .btn-primary-2, .btn-primary-outline, .btn-outline-primary,
    .btn-secondary, .btn-outline-secondary, .btn-outline-black, .btn-outline-dark,
    .btn-dark, .btn-light, .btn-skyblue,
    .px-btn--primary, .px-btn--secondary, .px-btn--ghost,
    .pl-button, .pa-button, .pb-button, .pb-head-link, .wa-button, .wa-more, .nr-button, .nr-more,
    .pmd-button, .pmd-more, .hp-cta, .community-showcase__cta,
    .px-pricing-compare__cta, .px-tool-learning-promo__cta, .pxe-premium-cta a,
    .promo-cta, .promo-banner__cta, .piplix-house-ad__cta, .ad-slot .promo-action,
    .vd-notify__fields button, .px-tools-context .btn,
    .px-tool-page button.btn,
    .learn-hero-cta, .streak-strip__btn, .px-streak-card__action, .px-streak-card__quiet,
    .px-streak-event__primary, .px-streak-event__secondary, .upgrade-btn,
    .pxl-btn-primary, .pxl-btn-quiet, .pxl-streakpanel__btn, .btn-resume, .btn-next, .btn-skip-test, .pw-btn, .pr-btn,
    .site-error__btn, .stg-dash__cta, .chl-dash__cta, .px-dash-arena__primary, .px-sess__play,
    .px-tst-btn, .px-tovr__starter-go, .px-bt-btn, .px-bt-card__cta,
    .pxstr__cta, .pxstr-card__cta, .pxstr__btn, .pxch-cta,
    .tl-btn--primary, .tl-result__secondary, .tl-arena-ready-cta,
    .tl-page a.tl-btn, .tl-page form .tl-btn,
    .tl-ui-button--primary, .tl-ui-dialog .tl-ui-button--secondary, .tl-b-chat__send,
    .pj-primary, .tl-rv-cta, .px-lix-primary, .px-lix-send, .mc-pack-buy,
    .px-product-dialog button:not(.is-danger), .driver-popover-next-btn, .driver-popover-prev-btn,
    .px-feedback__send, .px-feedback__record-button,
    .comment-post-btn, .new-thread-btn, .reply-save-btn, .reply-cancel-btn, .reply-edit-btn, .ctx-btn,
    .gep__next, .ppe__btn, .cve__keep, .crr__next, .csr__next, .oar__action,
    .plm__button--primary, .l3-primary, .l3-nav [data-l3-back], #sd-next,
    .fc-mentor-setup button[type="submit"], .fc-properties button[type="submit"]
  ):not(
    [role="tab"], [role="radio"], [role="switch"], [aria-pressed], [aria-haspopup],
    [aria-expanded], [aria-current], [aria-checked], .topic-nav .btn,
    .is-correct, .is-wrong, .is-incorrect,
    [data-bs-toggle="tab"], [data-bs-toggle="pill"], [data-bs-toggle="dropdown"],
    [data-bs-toggle="collapse"], [data-side], .dropdown-toggle,
    .btn-danger, .btn-outline-danger, .btn-success,
    .px-btn--danger, .px-btn--success, .px-tst-btn--danger, .tl-btn--danger,
    .tl-buy, .tl-sell, .tl-submit, .tl-btn-close
  ) {
    --px-action-control: 1;
    --action-fill: var(--px-action);
    --action-hover-fill: var(--px-action-hover);
    --action-active-fill: var(--px-action-active);
    --action-ink: var(--px-action-on);
    --action-border: var(--px-action);
    --action-edge: var(--px-action-edge);
    --action-depth: 3px;
    --action-press: 2px;
    background: var(--action-fill) !important;
    border-color: var(--action-border) !important;
    border-radius: var(--px-action-radius) !important;
    color: var(--action-ink) !important;
    box-shadow: 0 var(--action-depth) 0 var(--action-edge), inset 0 1px 0 #ffffff33 !important;
    transform: translateY(0) !important;
    text-decoration: none;
    touch-action: manipulation;
    transition: background-color .14s ease, border-color .14s ease,
      color .14s ease, box-shadow .1s ease, transform .1s ease !important;
    /* The shared palette controls hover instead of legacy brightness effects. */
    filter: none !important;
    text-shadow: none;

    &:hover {
      background: var(--action-hover-fill) !important;
      border-color: var(--action-border) !important;
      color: var(--action-ink) !important;
      transform: translateY(-1px) !important;
    }

    &:active, &[data-px-action-pressed] {
      background: var(--action-active-fill) !important;
      border-color: var(--action-border) !important;
      box-shadow: 0 1px 0 var(--action-edge), inset 0 1px 2px #5c260012 !important;
      transform: translateY(var(--action-press)) !important;
    }

    &:focus-visible {
      outline: 2px solid var(--px-action-focus) !important;
      outline-offset: 3px !important;
      &:not(:active):not([data-px-action-pressed]) {
        box-shadow: 0 var(--action-depth) 0 var(--action-edge), 0 0 0 2px #fff !important;
      }
    }

    &:is(:disabled, [aria-disabled="true"], .disabled, .is-disabled) {
      background: #e2e8f0 !important;
      border-color: #cbd5e1 !important;
      color: #64748b !important;
      box-shadow: none !important;
      cursor: not-allowed;
      transform: none !important;
      transition: none !important;
    }

    /* Labels and currentColor icons can have their own legacy color rules. */
    & :is(span, strong, i, svg) { color: inherit !important; }

    /* Retain the existing primary/secondary hierarchy and component sizes. */
    &:is(
      .px-action--secondary, .btn-primary-outline, .btn-outline-primary, .btn-outline-secondary,
      .btn-outline-black, .btn-outline-dark, .btn-secondary, .btn-light,
      .px-btn--secondary, .pmd-button--light, .pb-button--light, .pb-head-link, .pmd-more, .wa-more, .nr-button--outline,
      .driver-popover-prev-btn, .tl-ui-dialog .tl-ui-button--secondary, .ctx-btn,
      .l3-nav [data-l3-back],
      .site-error__btn--secondary, .stg-dash__cta--ghost, .chl-dash__cta--ghost, .pr-ghost, .pxstr__btn,
      .px-pricing-compare__cta:not(.px-pricing-compare__cta--pro),
      .px-tst-btn:not(.px-tst-btn--primary),
      .px-bt-btn:not(.px-bt-btn--primary),
      .px-bt-card__cta:not(.px-bt-card__cta--primary),
      .tl-result__secondary, .tl-page a.tl-btn:not(.tl-btn--primary),
      .px-product-dialog button:not(.is-primary), .pxl-btn-quiet,
      .btn-skip-test, .pw-skip, .tl-btn--ghost, .px-streak-card__quiet, .px-streak-event__secondary,
      .pxstr__cta--ghost, .pxch-cta--ghost
    ) {
      --action-fill: #fff;
      --action-hover-fill: #fff5eb;
      --action-active-fill: #ffead6;
      --action-ink: var(--px-action-text);
      --action-edge: #e2ad84;
      --action-depth: 2px;
      border-style: solid !important;
      border-width: 1px !important;
    }

    &:is(.px-btn--ghost, .streak-strip__btn--ghost, .reply-save-btn, .reply-cancel-btn, .reply-edit-btn, .ppe__btn--back) {
      --action-fill: transparent;
      --action-hover-fill: #fff5eb;
      --action-active-fill: #ffead6;
      --action-ink: var(--px-action-text);
      --action-border: transparent;
      --action-edge: transparent;
      --action-depth: 0px;
      --action-press: 1px;
    }

    /* Filled hero cards need a light action surface, not orange on orange.
     * Keep their existing dimensions and use a soft neutral edge on both cards. */
    &:is(.pplx-dashboard .todaysCard .btn-resume, .px-tovr__starter-go) {
      --action-fill: #fff;
      --action-hover-fill: #f8fafc;
      --action-active-fill: #eef2f6;
      --action-ink: #263b50;
      --action-border: #fff;
      --action-edge: #cbd5e1;
      --action-depth: 2px;
      --action-press: 1px;
    }

    @media (prefers-reduced-motion: reduce) { transition: none !important; }

    @media (forced-colors: active) {
      background: ButtonFace !important;
      border-color: ButtonText !important;
      color: ButtonText !important;
      &:focus-visible { outline-color: Highlight !important; }
    }
  }
}