@layer components {
  .root {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .ready,
  .loading,
  .done {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: all var(--ease-in-out) var(--duration-md);
  }

  :is(.ready, .loading, .done) > * {
    flex-shrink: 0;
  }

  .ready[aria-hidden="true"] {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  .loading,
  .done {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  :is(.loading, .done)[aria-hidden="true"] {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  .loading-spacer,
  .done-spacer {
    display: flex;
    align-items: center;
    justify-content: center;
    block-size: 0;
    max-inline-size: 0;
    overflow: hidden;
    transition: all var(--ease-in-out) var(--duration-md);
  }

  :is(.loading-spacer, .done-spacer) > * {
    flex-shrink: 0;
  }

  .root[data-loading] .loading-spacer {
    max-inline-size: 100vw;
  }

  .root:not([data-loading])[data-done] .done-spacer {
    max-inline-size: 100vw;
  }

  .spinner {
    color: currentColor;
  }
}

@layer component-overrides {
  .root {
    min-inline-size: 0;
    padding-inline: 0;
  }

  .ready,
  .loading,
  .done {
    column-gap: var(--size-8);
    padding-block: var(--size-8);
    padding-inline: var(--size-12);
  }

  .root[data-size="sm"] :is(.ready, .loading, .done) {
    column-gap: var(--size-4);
    padding-block: var(--size-4);
    padding-inline: var(--size-8);
  }

  .loading-spacer,
  .done-spacer {
    column-gap: var(--size-8);
    padding-inline: var(--size-12);
  }

  .root[data-size="sm"] :is(.loading-spacer, .done-spacer) {
    column-gap: var(--size-4);
    padding-inline: var(--size-8);
  }

  .icon {
    block-size: var(--size-20);
    inline-size: var(--size-20);
  }

  .root[data-size="sm"] .icon {
    block-size: var(--size-16);
    inline-size: var(--size-16);
  }

  .spinner {
    block-size: var(--size-16);
    inline-size: var(--size-16);
  }

  .root[data-size="sm"] .spinner {
    block-size: var(--size-12);
    inline-size: var(--size-12);
  }
}
