/*
Button

The template's own parts. The .button class it renders, with every variant,
size and state, is the base's (style/base/button.css), so a <Button> and a
bare <button class="button ..."> are the same element to the cascade.

  .button-label     wraps the slot; hidden, not removed, while loading
  [data-loading]    spinner over the hidden label, width kept
  .button-spinner   the Spinner ring centered over the label
*/

/* The package's layer order, repeated in every sheet so it holds whichever sheet loads first. */
@layer reset, tokens, base, components, templates, utilities, overrides;

@layer templates {

.button-label {
  display:     inline-flex;
  align-items: center;
  gap:         var(--control-gap);
  /* A label longer than the button (a block button at phone width) shrinks
     to it and is clipped at its end, so it starts at the button's padding
     instead of spilling past both edges. clip, not hidden: the vertical
     axis stays visible and descenders are not cut. */
  min-width:   0;
  overflow-x:  clip;
}

.button[data-loading] {
  cursor:  progress;
  opacity: 1;
}

/* opacity, not visibility: the label stays in layout (the width holds) and
   in the accessibility tree, so a busy button keeps its accessible name. */
.button[data-loading] > .button-label {
  opacity: 0;
}

/* The ring is the Spinner template's (.spinner, from ../spinner): one ring,
   one keyframe. Button only centers it over the hidden label. */
.button > .button-spinner {
  position: absolute;
  inset:    0;
  margin:   auto;
}

}