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

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

  /* Rows */
  .library__rows {
    --rows-padding: 0 var(--inline-space-half);
  }

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

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

    .row__meta a {
      color: inherit;
    }
  }

  .library__thumb {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    inline-size: 4rem;
    block-size: 4rem;
    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);
  }

  .library__mark {
    color: var(--color-ink-dark);
  }

  .library__preview {
    max-inline-size: 100%;
    max-block-size: 100%;
    object-fit: contain;
    border: var(--border);
    border-radius: var(--radius-sm);
  }

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

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

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

  .library__icon--pdf {
    --attachment-icon-color: light-dark(oklch(52% 0.19 25), oklch(72% 0.15 25));
  }

  .library__icon--doc,
  .library__icon--docx {
    --attachment-icon-color: light-dark(oklch(50% 0.17 255), oklch(72% 0.13 255));
  }

  .library__icon--xls,
  .library__icon--xlsx {
    --attachment-icon-color: light-dark(oklch(52% 0.14 150), oklch(74% 0.14 150));
  }

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

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

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

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

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

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

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

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

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

    /* The types on a line of their own, the sort beside the filter box, the switch last. */
    .library .filter-bar {
      flex-wrap: wrap;
    }

    .library .filter-bar__segments {
      flex: 1 1 100%;

      .filter-bar__segment {
        flex: 0 0 auto;
        padding-inline: 0.5rem;
      }

      .filter-bar__segment--select {
        flex: 1 1 0;
        padding-inline-end: 1.5rem;
      }
    }

    .library .filter-box {
      flex: 1 1 8rem;
    }

    .library .filter-bar__switch {
      order: 1;
    }

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

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