/* Button */

@layer stageshow {
  .ss-button {
    /* A box with text keeps a layer of its own, so a press or a row moving
       it never steps its label a whole pixel inside the fill */
    will-change: transform;

    --ss-button-height: 28px;
    --ss-button-pad: 12px;
    /* The side with a glyph: a glyph reads as further in than words do */
    --ss-button-pad-icon: 9px;
    --ss-button-icon: 14px;

    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    --ss-button-gap: 6px;
    gap: var(--ss-button-gap);
    box-sizing: border-box;
    min-height: var(--ss-button-height);
    padding: 0 var(--ss-button-pad);
    border-radius: var(--ss-radius-sm);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 1.25;
    white-space: nowrap;
    color: var(--ss-text-strong);
    background: var(--ss-surface);
    /* The ring is drawn inside, so it never adds to the padding */
    box-shadow: inset 0 0 0 1px var(--ss-ink-4);
    transition:
      transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
      background-color 160ms ease,
      color 160ms ease,
      padding 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .ss-button[data-size="small"] {
    --ss-button-height: 24px;
    --ss-button-pad: 8px;
    --ss-button-pad-icon: 6px;
    --ss-button-icon: 12px;
    --ss-button-gap: 5px;
    font-size: 12px;
  }

  .ss-button[data-size="large"] {
    --ss-button-height: 32px;
    --ss-button-pad: 14px;
    --ss-button-pad-icon: 11px;
    --ss-button-icon: 16px;
    --ss-button-gap: 7px;
    border-radius: var(--ss-radius-md);
    font-size: 14px;
  }

  .ss-button[data-leading] { padding-left: var(--ss-button-pad-icon); }
  .ss-button[data-trailing] { padding-right: var(--ss-button-pad-icon); }

  /* Variants: hover is one step of the button's own color, never a gray swap */
  .ss-button[data-hover] { background: color-mix(in srgb, var(--ss-surface), #000 4%); }

  .ss-button[data-variant="primary"] { background: var(--ss-accent); color: #fff; box-shadow: none; }
  .ss-button[data-variant="primary"][data-hover] { background: color-mix(in srgb, var(--ss-accent), #000 10%); }

  .ss-button[data-variant="danger"] { background: var(--ss-danger); color: #fff; box-shadow: none; }
  .ss-button[data-variant="danger"][data-hover] { background: color-mix(in srgb, var(--ss-danger), #000 10%); }

  .ss-button[data-variant="tertiary"] { background: var(--ss-ink-2); box-shadow: none; }
  .ss-button[data-variant="tertiary"][data-hover] { background: var(--ss-ink-3); }

  .ss-button[data-variant="ghost"] { background: transparent; box-shadow: none; }
  .ss-button[data-variant="ghost"][data-hover] { background: var(--ss-ink-2); }

  /* The press: a small scale on pointer-down, the label stays put inside it */
  .ss-button[data-pressed] { transform: scale(0.97); }

  .ss-button__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: var(--ss-button-icon);
    height: var(--ss-button-icon);
  }

  /* The leading slot opens and closes its own width, taking the gap with it,
     and the icon fades and grows in as it opens */
  .ss-button__lead {
    margin-right: calc(-1 * var(--ss-button-gap, 6px));
    width: 0;
    opacity: 0;
    scale: 0.6;
    transition:
      width 220ms cubic-bezier(0.22, 1, 0.36, 1),
      margin 220ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 160ms ease,
      scale 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .ss-button__lead[data-open] {
    margin-right: 0;
    width: var(--ss-button-icon);
    opacity: 1;
    scale: 1;
  }

  .ss-button__icon > svg {
    flex: none;
    width: var(--ss-button-icon);
    height: var(--ss-button-icon);
  }

  /* The label's line box trimmed to cap height and baseline, so the words
     center on their own ink beside an icon instead of sitting low */
  .ss-button__label {
    display: block;
    text-box: trim-both cap alphabetic;
  }
}