
  /* above Button's layer, so these win by layer order, not file order */
  @layer PretComponent, PretComposite;
  @layer PretComposite {
    .pretui-iconbtn[data-scopedcss-bcde96c7a5-d668396417] {
      padding: 0;
      width: var(--pretui-row-h, var(--pretui-button-h, 2.24em));
    }
    /* square against Button's 24px minimum height at xs */
    .pretui-iconbtn[data-size='xs'][data-scopedcss-bcde96c7a5-d668396417] {
      width: max(var(--pretui-row-h, var(--pretui-button-h, 2.24em)), 1.5rem);
    }
    /* block-level, so the glyph is not set on Button's label line and
       its baseline */
    .pretui-iconbtn-glyph[data-scopedcss-bcde96c7a5-d668396417] {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /* pressed is a tint one step stronger than the filled appearance's,
       so it reads on outlined, plain and filled alike; an accent fill has
       no stronger step and a link has no fill, so toggles use another
       appearance */
    .pretui-iconbtn[aria-pressed='true'][data-scopedcss-bcde96c7a5-d668396417]:not(
        [data-appearance='accent'],
        [data-appearance='link'],
        [data-pressed-tint='none']
      ) {
      --_iconbtn-pressed-base: var(--background);
      --pretui-btn-surface: color-mix(
        in oklch,
        var(--pretui-tone) 28%,
        var(--_iconbtn-pressed-base)
      );
      --pretui-btn-surface-hover: color-mix(
        in oklch,
        var(--pretui-btn-tint) 34%,
        var(--_iconbtn-pressed-base)
      );
    }
    /* over the outlined appearance's own base surface, when a theme sets
       one, so pressing changes the tint and not the base */
    .pretui-iconbtn[aria-pressed='true'][data-appearance='outlined'][data-scopedcss-bcde96c7a5-d668396417] {
      --_iconbtn-pressed-base: var(
        --pretui-button-secondary-bg,
        var(--background)
      );
    }
    /* not when disabled, whose GrayText edge from Button is its only cue */
    @media (forced-colors: active) {
      .pretui-iconbtn[aria-pressed='true'][data-scopedcss-bcde96c7a5-d668396417]:not(
          :disabled,
          [aria-disabled='true']
        ) {
        border-color: Highlight;
      }
    }
  }
