@layer utilities {
  [hidden],
  [type=hidden],
  .is--hidden {
    display: none !important;
    visibility: hidden !important;
  }
  [disabled],
  .is--disabled,
  :disabled {
    cursor: not-allowed !important;
    opacity: var(--twentyone--element--disabled-opacity);
    -webkit-user-select: none;
    user-select: none;
  }
  [disabled] *,
  .is--disabled *,
  :disabled * {
    pointer-events: none;
  }
  .align--center {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .align--full {
    max-width: unset !important;
    width: 100% !important;
  }
  .align--right {
    margin-left: auto !important;
  }
  .is--loading {
    overflow: hidden;
    position: relative;
  }
  .is--loading::before {
    animation: skeletonLoading 1.5s ease-in-out infinite;
    background-image: linear-gradient(90deg, rgba(var(--twentyone--color--black-rgb), 0.05) 25%, rgba(var(--twentyone--color--black-rgb), 0.1) 50%, rgba(var(--twentyone--color--black-rgb), 0.05) 25%);
    background-size: 200% 100%;
    content: "" !important;
    display: block;
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
    z-index: 99;
    transition: var(--twentyone--element--transition);
    transform: none !important;
  }
  .is--loading > * {
    opacity: 0 !important;
  }
  .is--loading.is--inverted::before {
    background-image: linear-gradient(90deg, rgba(var(--twentyone--color--white-rgb), 0.1), rgba(var(--twentyone--color--white-rgb), 0.25) 50%, rgba(var(--twentyone--color--white-rgb), 0.1) 75%);
  }
  @keyframes skeletonLoading {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }
  .width--auto:not(.icon--only) {
    width: fit-content;
  }
  .width--custom {
    width: var(--width, 100%);
  }
  [class*=twentyone] address {
    display: block;
    font-style: normal;
    color: var(--twentyone--color--grey);
    font-size: var(--twentyone--element--font-size);
  }
}