/* DPD button system -- one font, one shape, everywhere.
 *
 * WHY THIS FILE EXISTS
 * An audit of every stylesheet and every inline <style> in the theme found
 * 1,250 rules styling buttons, between them SIXTEEN different corner radii:
 * 999px on 58 rules, then 10px, 0, 6px, 16px, 9px, 8px, 7px, 5px, 14px, 30px,
 * 3px, 4px and a couple of one-offs. Fonts were as scattered: some buttons name
 * Helvetica Neue, some Arial, some Trebuchet MS, some Barlow Condensed, some a
 * design-system token, and most name nothing and inherit whatever the page
 * happens to set. A button looked like a different component on every route.
 *
 * WHY @layer AND NOT MORE SPECIFICITY
 * Most of those 1,250 rules are already !important, several of them behind an
 * id plus five classes. Out-specifying them would mean a selector longer than
 * any of them and would start a fourth arms race in a theme that already has
 * three (see dpd-chrome-stability.css, dpd-admin-record-cards.css and the
 * inline shells). Cascade layers settle it by rule instead: for IMPORTANT
 * declarations the layer order is inverted, so an important declaration inside
 * any layer beats every important declaration outside one, at any specificity.
 * Nothing else in this theme uses @layer, so this layer wins outright -- and it
 * is the whole reason the selectors below can stay short and readable.
 *
 * THE TWO KNOBS
 * This file sets exactly two properties -- border-radius and font-family. It is
 * deliberately not a button reset: colour, padding, size and weight stay with
 * whichever stylesheet owns that button today, so adopting one shape cannot
 * flatten the difference between a primary and a quiet button.
 *
 *   BOXY      --dpd-btn-radius: 6px
 *   CIRCULAR  --dpd-btn-radius: 999px
 *
 * Switch the one value in :root below to move the whole site between them.
 *
 * WHAT IS DELIBERATELY EXEMPT
 * Icon-only round controls -- the header's yellow icon bubbles, close buttons,
 * the sidebar collapse, notification counts, palette swatch dots, the Helper
 * launcher. They are 34-44px circles holding a glyph, not buttons with labels;
 * squaring them turns chrome the eye reads as chrome into a grid of small
 * boxes. They are listed by name in the :not() chain rather than matched by a
 * wildcard, so adding one is a deliberate act. Anything that needs to opt out
 * later can take the .dpd-btn-shape-exempt class instead of growing this list.
 *
 * Segments of a segmented control are exempt too, and are matched by their
 * CONTAINER rather than by name -- see the second :not() chain for why.
 */

:root {
  /* BOXY. For the circular variant this becomes 999px -- nothing else changes. */
  --dpd-btn-radius: 6px;

  /* The brand UI face. Stated in full rather than as var(--dpd-font-ui) because
     that token is declared twice at :root with two different values (style.css
     resolves to acumin-pro, but a button should not depend on which copy of the
     stylesheet loaded last). */
  --dpd-btn-font: "acumin-pro", "Acumin Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

@layer dpd-buttons {
  :is(
    button,
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    .btn,
    .button,
    .mock-btn,
    .gform_button,
    .gform_next_button,
    .gform_previous_button,
    .dpd-modal-button,
    .dpd-admin-ops-btn,
    .dpd-story-button,
    .approval_but,
    .crs-btn,
    .course-start-btn,
    .dpd-launch-btn,
    [class*="__cta"],
    [class*="-cta"]
  ):not(
    /* icon-only circles: header chrome */
    [class*="-bubble"],
    .dpd-public-header-account-toggle,
    .dpd-public-header-menu-toggle,
    .dpd-v2-header-icon,
    /* icon-only circles: nav and sidebar */
    .dpd-v2-nav-collapse,
    .dpd-v2-nav-close,
    .dpd-v2-nav-toggle,
    .dpd-v2-sidebar-toggle,
    .dpd-sidebar-toggle,
    /* icon-only circles: dismiss controls */
    [class*="close"],
    .mfp-close,
    .fancybox-close,
    /* dots, counts and badges that happen to be buttons */
    [class*="__dot"],
    [class*="-dot"],
    .dpd-v2-info-dot,
    .dpd-v2-nav-count,
    .sidebar-count,
    .avatar-color-btn,
    /* launchers and carousel controls */
    .dpd-helper-launcher__button,
    .owl-dot,
    .slick-dot,
    /* controls with no button chrome at all -- a radius would invent some */
    .dpd-table-sort-button,
    .dpd-v2-updates-drawer-backdrop,
    .dpd-portal-search-input,
    /* the documented escape hatch */
    .dpd-btn-shape-exempt
  ):not(
    /* SEGMENTED CONTROLS.
       A segment is not a free-standing button -- it is one cell of a track, and
       the track is a pill drawn by its own stylesheet. Give the segment its own
       corner and the active cell becomes a box sitting inside a pill, which is
       what happened to the FRONT / REAR switch on tire-details. Segments follow
       the track they sit in, in both shape variants.

       Matched by CONTAINER, not by class name: .dropdown-status and
       .btn-toggle-bulk both carry "toggle" in their class and are ordinary
       standalone buttons that should take the site shape. */
    :where(
      [class*="side-switch"],
      [class*="mode-switch"],
      [class*="-tabs"],
      [class*="__tabs"],
      .nav-tabs,
      [class*="segmented"],
      .dpd-v2-finder-position-toggle,
      .dpd-finder-card-side-toggle,
      .dpd-admin-view-toggle,
      .acc-appearance-toggle-pill,
      .dpd-v2-grid-toggle,
      .swag-store-sec1-tabs,
      .dpd-v2-wallet-flow__tabs
    ) *,
    /* the two segment buttons that name themselves rather than their track */
    .dpd-v2-tire-side-switch__button,
    .dpd-v2-finder-card-side-button
  ) {
    border-radius: var(--dpd-btn-radius) !important;
    font-family: var(--dpd-btn-font) !important;
  }
}