/* Opt in only actual, ordinary text actions to this face. The HTML element type
   does not select it: menus, ribbon tiles, list rows, filters and icon controls
   retain their own appearance. Components continue to set size and spacing. */
@layer new-action-buttons {
  body:not(:has(#retail-workspace, #retail-frame)) .new-action-button {
    --action-fill: linear-gradient(180deg, #4272aa 0%, #365f91 100%);
    --action-hover: linear-gradient(180deg, #4c80bb 0%, #4272aa 100%);
    --action-face: var(--action-fill);
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--action-face) !important;
    color: #fff !important;
    box-shadow: 0 2px 4px rgba(0,0,0,.2) !important;
    font-weight: 400 !important;
    text-shadow: none !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: box-shadow 150ms ease, transform 150ms ease;

    &:is(.system_action_button_red, .system-dialog__button--danger, .cba-danger, .calendar-sync-ok, .danger, .btn-danger) {
      --action-fill: linear-gradient(180deg, #ac404b, #8b2a35);
      --action-hover: linear-gradient(180deg, #bd4b58, #a23844);
    }
    &:not(:is(:disabled, [aria-disabled="true"], .disabled, .calendarDefaultBlueButtonDisabled)) {
      &:hover { --action-face: var(--action-hover); }
      &:active { transform: translateY(1px) !important; box-shadow: 0 1px 2px rgba(0,0,0,.22) !important; }
    }
    &:focus-visible { outline: 3px solid #7db7ff !important; outline-offset: 2px !important; }
    &:is(:disabled, [aria-disabled="true"], .disabled, .calendarDefaultBlueButtonDisabled) {
      opacity: .48 !important;
      box-shadow: none !important;
      cursor: default !important;
      transform: none !important;
    }
    @media (prefers-reduced-motion: reduce) { transition: none !important; }
    @media (forced-colors: active) {
      border: 1px solid ButtonText !important;
      color: ButtonText !important;
      background: ButtonFace !important;
      text-shadow: none !important;
      &:focus-visible { outline-color: Highlight !important; }
    }
  }
}