picocss/scss/components/_loading.scss

@use "sass:map";
@use "../settings" as *;

@if map.get($modules, "components/loading") {
  /**
   * Loading ([aria-busy=true])
   */

  // Everything except form elements
  [aria-busy="true"]:not(input, select, textarea) {
    &::before {
      display: inline-block;
      width: 1em;
      height: 1em;
      background-image: var(#{$✨}icon-loading);
      background-position: right center;
      background-size: 1rem auto;
      background-repeat: no-repeat;
      content: "";
      vertical-align: -0.125em; // Visual alignment
    }

    &:not(:empty) {
      &::before {
        margin-right: calc(var(#{$✨}spacing) * 0.5);
      }
    }

    &:empty {
      text-align: center;
    }

    // Primary and secondary buttons
    &:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
      &::before {
        background-image: var(#{$✨}icon-loading-button);
      }

      @if $enable-classes {
        &.outline {
          &::before {
            background-image: var(#{$✨}icon-loading);
          }
        }

        &.contrast:not(.outline) {
          &::before {
            background-image: var(#{$✨}icon-loading-button-contrast);
          }
        }
      }
    }
  }

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