@layer porchlight {
  @layer reset, tokens, themes, base, layout, components, utilities, enhancements, print;
}

@layer porchlight.components {
  @scope (.pl-c-empty) {
    :scope {
      --pl-c-empty-pad: var(--pl-space-8);
      --pl-c-empty-tone: var(--pl-color-text-muted);
      justify-items: center;
      gap: var(--pl-space-3);
      padding: var(--pl-c-empty-pad);
      text-align: center;
      color: var(--pl-color-text-muted);
      display: grid;
    }

    .pl-c-empty__media {
      inline-size: var(--pl-c-empty-media-size, 3rem);
      block-size: var(--pl-c-empty-media-size, 3rem);
      color: var(--pl-c-empty-tone);
      opacity: .6;
      justify-content: center;
      align-items: center;
      display: flex;
    }

    .pl-c-empty__media svg, .pl-c-empty__media img {
      block-size: 100%;
      inline-size: 100%;
    }

    .pl-c-empty__title {
      font-size: var(--pl-text-lg);
      font-weight: var(--pl-font-weight-semibold);
      color: var(--pl-color-text);
      text-wrap: balance;
      margin: 0;
    }

    .pl-c-empty__description {
      max-inline-size: 36ch;
      font-size: var(--pl-text-sm);
      text-wrap: pretty;
      margin: 0;
    }

    .pl-c-empty__actions {
      justify-content: center;
      align-items: center;
      gap: var(--pl-space-2);
      flex-wrap: wrap;
      margin-block-start: var(--pl-space-2);
      display: flex;
    }

    :scope[data-tone="danger"] {
      --pl-c-empty-tone: var(--pl-color-danger);
    }

    :scope[data-tone="success"] {
      --pl-c-empty-tone: var(--pl-color-success);
    }
  }

  @media (forced-colors: active) {
    :where(.pl-c-empty__media) {
      color: canvastext;
    }
  }
}