@layer blades {
: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: .5;
}

[aria-busy="true"]:not(input, select, textarea, html, form):not(:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])) {
  white-space: nowrap;
}

[aria-busy="true"]:not(input, select, textarea, html, form):before {
  background-image: var(--pico-icon-loading);
  content: "";
  vertical-align: -.125em;
  background-repeat: no-repeat;
  background-size: 1em;
  width: 1em;
  height: 1em;
  display: inline-block;
}

[aria-busy="true"]:not(input, select, textarea, html, form):not(:empty):before {
  margin-inline-end: calc(var(--pico-spacing) * .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;
}

button, [type="submit"], [type="button"], [type="reset"], [role="button"] {
  &[aria-busy="true"]:not(:empty) {
    color: #0000;
    position: relative;

    & > * {
      opacity: 0;
    }

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

}
