@layer components {
  .library {
    margin-block: var(--block-space);
  }

  .library__title {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.024em;
    line-height: 1.15;
    margin-block: var(--block-space) var(--block-space-half);
    overflow-wrap: anywhere;
  }

  /* Rows */
  .library__rows {
    --rows-border-radius: 0.5em;
    --rows-border-size: 0;
  }

  .library__row {
    border-radius: 0;
    gap: var(--inline-space-double);
    padding-block: var(--block-space-half);

    & + & {
      border-block-start: var(--border);
    }

    .row__meta a {
      color: inherit;
    }
  }

  .library__thumb {
    block-size: 4rem;
    display: grid;
    flex: 0 0 auto;
    inline-size: 4rem;
    place-items: center;
    text-decoration: none;
  }

  .library__name {
    color: inherit;
    font-size: var(--text-medium);
    text-decoration: none;

    @media (any-hover: hover) {
      &:hover {
        text-decoration: underline;
      }
    }
  }

  .library__sender {
    color: light-dark(oklch(50% 0.06 70), oklch(78% 0.06 70));
  }

  .library__byline {
    color: inherit;
  }

  .row--inactive .library__byline,
  .row--inactive .library__sender {
    color: var(--color-ink-dark);
  }

  .row--inactive .library__icon {
    opacity: 0.6;
  }

  /* Typed icons */
  .library__icon {
    --attachment-icon-color: var(--color-ink-medium);

    block-size: 3.5rem;
    font-size: var(--text-x-small);
    letter-spacing: 0.02em;
    max-inline-size: 100%;
    overflow: hidden;
    padding-inline: 0.25ch;
  }

  .library__icon--pdf {
    --attachment-icon-color: oklch(var(--lch-red-dark));
  }

  .library__icon--doc,
  .library__icon--docx {
    --attachment-icon-color: oklch(var(--lch-blue-dark));
  }

  .library__icon--xls,
  .library__icon--xlsx {
    --attachment-icon-color: oklch(var(--lch-green-dark));
  }

  .library__icon--jpg,
  .library__icon--jpeg,
  .library__icon--png,
  .library__icon--heic,
  .library__icon--webp {
    --attachment-icon-color: oklch(var(--lch-purple-dark));
  }

  /* Folder */
  .library__folder {
    --folder-color: var(--credential-person);

    background-color: var(--folder-color);
    block-size: 2.6rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) var(--radius-sm);
    inline-size: 3.75rem;
    margin-block-start: 0.45rem;
    position: relative;

    &::before {
      background-color: color-mix(in oklch, var(--folder-color) 80%, black);
      block-size: 0.5rem;
      border-radius: var(--radius-sm) var(--radius-sm) 0 0;
      content: "";
      inline-size: 45%;
      inset-block-start: -0.45rem;
      inset-inline-start: 0;
      position: absolute;
    }

    &::after {
      background-color: var(--color-canvas);
      block-size: 0.15rem;
      border-radius: 1px;
      content: "";
      inset-block-start: 0.2rem;
      inset-inline: 0.3rem;
      opacity: 0.9;
      position: absolute;
    }
  }

  @media (width < 640px) {
    .library__title {
      font-size: 1.75rem;
    }

    .library__row {
      flex-wrap: wrap;
      gap: var(--inline-space);
    }

    .library__thumb {
      block-size: 3rem;
      inline-size: 3rem;
    }

    .library__icon {
      block-size: 2.875rem;
      font-size: var(--text-xx-small);
      padding-inline: 0;
    }

    .library__folder {
      block-size: 1.9rem;
      inline-size: 2.75rem;
      margin-block-start: 0.35rem;

      &::before {
        block-size: 0.4rem;
        inset-block-start: -0.35rem;
      }
    }

    .library__row .row__body {
      flex: 1 1 0;
    }

    .library__row .row__end {
      flex-basis: 100%;
      padding-inline-start: calc(3rem + var(--inline-space));
    }
  }
}