@layer components {
  .folder {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
    max-inline-size: var(--measure);
    margin-inline: auto;
    padding-inline: var(--gutter-fluid);
  }

  .folder__description {
    font: var(--type-body-sm);
    color: var(--color-ink-muted);
    text-wrap: pretty;
  }

  .folder__quick-view {
    display: contents;
  }

  .folder--quick {
    margin-inline: var(--space-0);
    padding: var(--space-0);
  }

  .folder__glance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
  }

  .folder > .records {
    margin-block-start: var(--space-0);
  }

  .folder__empty {
    font: var(--type-body-sm);
    color: var(--color-ink-faint);
  }

  .folder > turbo-frame {
    display: contents;
  }

  .folder__start {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .folder__edit {
    align-self: start;
  }
}