FixIt/assets/css/_page/_single/_collections.scss

// Collection Navigation
.collection-card {
  font-size: 0.875rem;
  background-color: darken($global-background-color, 3%);
  margin-block: 1rem;
  padding: 1rem 1.25rem;
  position: relative;
  @include border-radius(0.5rem);
  @include user-select(none);
  @extend .print-d-none;

  [data-theme=dark] & {
    background-color: lighten($global-background-color-dark, 3%);
  }

  &:has(.collection-nav-item:nth-child(2))::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0.75rem;
    width: 1px;
    height: 2rem;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.03) 100%);

    [data-theme=dark] & {
      background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.03),
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.03) 100%
      );
    }
  }

  .collection-title {
    @include link(false, false);
  }

  .collection-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;

    &:not(:empty) {
      margin-top: 0.5rem;
    }

    .collection-nav-item {
      flex-grow: 1;
      max-width: calc(50% - 0.5rem);
      font-weight: 500;
      display: flex;
      align-items: center;
      transition: all 0.3s ease-out;

      &:only-child {
        max-width: 100%;
      }

      i {
        flex-shrink: 0;
      }

      span {
        flex-grow: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      &[rel='next'] {
        text-align: right;
      }

      &[rel='prev']:hover {
        transform: translateX(-4px);
      }

      &[rel='next']:hover {
        transform: translateX(4px);
      }
    }
  }
}

// Collection aside container
.aside-collection {
  position: sticky;
  top: calc(#{fixit-var(header-height)} + #{fixit-var(breadcrumb-height)});
  box-sizing: border-box;
  @include overflow-wrap(break-word);
  @include blur;
  @extend .print-d-none;
}

// Collection List
.collection-details {
  &:not(:last-of-type) {
    margin-bottom: 0.5rem;
  }

  &.open {
    .collection-summary {
      background-color: darken($global-background-color, 4%);

      [data-theme=dark] & {
        background-color: lighten($global-background-color-dark, 4%);
      }
    }
  }

  .collection-summary {
    display: flex;
    align-items: baseline;
    gap: 0.25em;
    padding: 0.2em 0.5em;
    background-color: darken($global-background-color, 3%);

    [data-theme=dark] & {
      background-color: lighten($global-background-color-dark, 3%);
    }
    
    > i.fa-layer-group {
      flex-shrink: 0;
    }

    .collection-name {
      flex-grow: 1;
      font-weight: bold;
      font-size: fixit-var(collection-title-font-size);

      &::before {
        content: attr(title) '・';
      }
    }

    .collection-count {
      flex-shrink: 0;
      color: fixit-var(secondary);
    }

    .details-icon {
      flex-shrink: 0;
    }

    @include user-select(none);
  }

  .collection-content {
    font-size: fixit-var(collection-list-font-size);
    background-color: darken($global-background-color, 2%);

    [data-theme=dark] & {
      background-color: lighten($global-background-color-dark, 2%);
    }

    .collection-list {
      margin: 0;
      padding-inline: 1.6em 0.8em;
      padding-block: 0.4em;
      text-indent: -0.8em;
      list-style: none;
      overflow-y: scroll;
      max-height: 60vh;
      @include scrollbar-width(none, 0);

      .collection-item > a::before,
      .collection-item > span::before {
        content: '|';
        font-weight: 600;
        margin-right: 0.5em;
        position: relative;
        bottom: 2px;
        color: fixit-var(single-link-color);
      }

      .collection-item > .active {
        font-weight: bold;
        color: fixit-var(single-link-color);

        &::before {
          color: fixit-var(single-link-hover-color);
        }
      }
    }

    .collection-nav-simple {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5em;
      background-color: darken($global-background-color, 3%);

      [data-theme=dark] & {
        background-color: lighten($global-background-color-dark, 3%);
      }

      a.collection-nav-item {
        padding-inline: 2px;
        @include border-radius(full);
        transition: background-color 0.3s ease-out;

        &:hover {
          background-color: darken($global-background-color, 10%);

          [data-theme=dark] & {
            background-color: lighten($global-background-color-dark, 10%);
          }
        }
      }

      > i.collection-nav-item {
        padding: 4px 2px;
        cursor: not-allowed;
      }
    }
  }
}