/**
 * Loading ([aria-busy=true])
 */
:where(:scope),
:host {
  --pico-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
}
:where(:scope, [data-theme="light"], [data-theme="dark"]),
:host {
  --pico-loading-spinner-opacity: 0.5;
}

[aria-busy="true"]:not(input, select, textarea, html, form):not(
    :where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])
  ) {
  /* :where() zeroes the specificity of the button list inside :not(), so this rule stays
   * low-specificity and doesn't override the more specific button rules below */
  white-space: nowrap;
}
[aria-busy="true"]:not(input, select, textarea, html, form)::before {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: var(--pico-icon-loading);
  background-size: 1em auto;
  background-repeat: no-repeat;
  content: "";
  vertical-align: -0.125em;
}
[aria-busy="true"]:not(input, select, textarea, html, form):not(:empty)::before {
  margin-inline-end: calc(var(--pico-spacing) * 0.5);
}
[aria-busy="true"]:not(input, select, textarea, html, form):empty {
  text-align: center;
}

button[aria-busy="true"],
[type="submit"][aria-busy="true"],
[type="button"][aria-busy="true"],
[type="reset"][aria-busy="true"],
[role="button"][aria-busy="true"],
a[aria-busy="true"] {
  pointer-events: none;
}

/* Buttons keep their size: the label stays in place but hidden, the spinner sits on top */
button,
[type="submit"],
[type="button"],
[type="reset"],
[role="button"] {
  &[aria-busy="true"]:not(:empty) {
    position: relative;
    color: transparent;

    > * {
      opacity: 0;
    }

    &::before {
      position: absolute;
      inset: 0;
      margin: auto;
    }
  }
}