@layer component {
  .book {
    /* background-color: bisque; */
    position: relative;
    isolation: isolate;

    .book__wrapper {
      padding-block-start: 32px;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-areas:
        /* 'breadcrumb' */
        'image'
        'title'
        'actions'
        'summary'
        'meta'
        'collections'
        'series'
        'similar'
        'reviews';

      @media (width >= calc(768 / 16 * 1rem)) {
        padding-block-start: 60px;
        grid-template-columns: calc(260 / 16 * 1rem) 1fr;
        grid-template-areas:
          /* '.        breadcrumb' */
          'sidebar  title'
          'sidebar  summary'
          'sidebar  meta'
          'sidebar  collections'
          'series   series'
          'similar  similar'
          'reviews  reviews';
        column-gap: 32px;
      }

      @media (width >= calc(1000 / 16 * 1rem)) {
        column-gap: 48px;
      }
    }

    /* .book__nav {
      grid-area: breadcrumb;
      margin-block-end: 20px;
    }

    .book__back {
      display: inline-flex;
      gap: 10px;
      align-items: center;
      color: var(--c-gray-medium);

      .icon {
        width: calc(20 / 16 * 1rem);
        height: calc(20 / 16 * 1rem);
        stroke: var(--c-gray-medium);
      }

      &:hover {
        text-decoration: underline 1px;
        text-underline-offset: 4px;
      }
    } */

    .sticky-container {
      display: contents;
      /* border: 2px solid red; */
      @media (width >= calc(768 / 16 * 1rem)) {
        grid-area: sidebar;
        display: block;
      }
    }

    .sticky-sidebar {
      display: contents;
      @media (width >= calc(768 / 16 * 1rem)) {
        display: block;
        position: sticky;
        top: calc(var(--header-height) + 16px);
      }
    }

    .book__image-wrapper {
      grid-area: image;
      width: calc(260 / 16 * 1rem);
      border-radius: 3px;
      height: fit-content;
      overflow: hidden;
      margin-inline: auto;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    }

    .book__image {
      width: 100%;
    }

    .book__actions {
      grid-area: actions;
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-between;
      gap: 12px;

      @media (width >= calc(768 / 16 * 1rem)) {
        padding-block-end: 16px;
        flex-direction: column;

        & .book-like {
          margin-inline-start: auto;
          margin-block-start: 12px;
        }

        & .book-interest {
          margin-inline: auto;
        }
      }
    }

    .book__title-strap {
      grid-area: title;

      @media (width < calc(768 / 16 * 1rem)) {
        margin-block: 32px;
      }
    }

    .book__title {
      font-size: calc(60 / 16 * 1rem);
      margin-block-end: 12px;

      @media (width < calc(768 / 16 * 1rem)) {
        font-size: calc(36 / 16 * 1rem);
      }
    }

    .book__meta-tags {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-block-end: 8px;
    }

    .book__category {
      font-size: calc(14 / 16 * 1rem);
      font-weight: 500;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: hsl(0, 0%, 45%);
      margin-inline-end: 8px;
    }

    .book__tag {
      font-size: calc(13 / 16 * 1rem);
      padding: 4px 10px;
      border-radius: 100vmax;
      background: hsl(0, 0%, 92%);
      color: hsl(0, 0%, 30%);
    }

    .book__series-title {
      margin-block-end: 8px;
      font-size: calc(18 / 16 * 1rem);

      @media (width < calc(768 / 16 * 1rem)) {
        font-size: calc(16 / 16 * 1rem);
      }
    }

    .book__series-link {
      color: hsl(0, 0%, 43%);

      &:hover {
        opacity: 0.7;
      }
    }

    .book__author {
      font-size: calc(24 / 16 * 1rem);

      @media (width < calc(768 / 16 * 1rem)) {
        font-size: calc(20 / 16 * 1rem);
      }
    }

    .book__author-link {
      position: relative;
      /* text-decoration: underline;
      text-underline-offset: 4px; */
      transition: color 150ms ease-in-out;

      &:hover {
        color: var(--c-magenta);
        text-decoration: none;
      }

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background-color: var(--color-text-dark);
        opacity: 1;
        transition: opacity 100ms ease-in-out;
      }

      &:hover::after {
        opacity: 0;
      }
    }

    .book__author-more {
      color: darkgray;
    }

    .book__mobile-actions {
      grid-area: actions;

      @media (width >= calc(768 / 16 * 1rem)) {
        display: none;
      }
    }

    .book__summary-title {
      /* color: var(--c-gray-medium); */
      /* font-weight: 400; */
    }

    .book__summary {
      grid-area: summary;
      padding-block-end: 32px;
      padding-block-start: 32px;
      border-block-start: 2px solid var(--c-gray-lighter);
      margin-block-start: 32px;

      & > p {
        line-height: 1.5;
        text-wrap: wrap;
      }

      & > p:not(:last-of-type) {
        margin-block-end: 16px;
      }

      @media (width >= calc(768 / 16 * 1rem)) {
        border: none;
        padding-block-start: 0;
      }
    }

    .book__subheading {
      font-size: calc(36 / 16 * 1rem);
      margin-block-end: 24px;

      @media (width < calc(768 / 16 * 1rem)) {
        font-size: calc(30 / 16 * 1rem);
      }
    }

    .book__collections {
      grid-area: collections;

      @media (width >= calc(768 / 16 * 1rem)) {
        margin-block-end: 16px;
      }
    }

    .book__collections-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
      grid-auto-rows: 1fr;
      gap: 10px 16px;
      list-style: none;
      padding: 0;
      margin-block-start: 20px;
    }

    .book__collections-list-item {
      display: grid;
      place-content: center;
      position: relative;
      padding: 8px;
      border-radius: 4px;
      border: 1px solid gray;
      text-align: center;

      &:hover {
        background-color: var(--c-white-bone);
      }
    }

    .book__collections-item-link {
      &::after {
        content: '';
        position: absolute;
        inset: 0;
      }
    }

    .book__meta {
      grid-area: meta;
      margin-block-end: 32px;
    }

    .book__meta-title {
      display: flex;
      align-items: baseline;
      gap: 12px;
      margin-block-end: 16px;
    }

    .book__meta-multiple-copies {
      font-size: calc(16 / 16 * 1rem);
      color: var(--c-gray-medium);
    }

    .book__meta-container {
      width: fit-content;

      & .book__desc-list:not(:last-of-type) {
        padding-block-end: 8px;
        border-block-end: 1px solid var(--c-gray-light);
        margin-block-end: 8px;
      }
    }

    .book__desc-list {
    }

    .book__desc-row {
      display: flex;
      margin-block-end: 4px;
    }

    .book__desc-term::after {
      content: ':';
    }

    .book__desc-details {
      margin-inline-start: 10px;
    }

    .book__series {
      grid-area: series;

      padding-block-start: 32px;
      border-block-start: 2px solid var(--c-gray-lighter);
      margin-block-start: 32px;
    }

    .book__similar {
      grid-area: similar;

      padding-block-start: 32px;
      border-block-start: 2px solid var(--c-gray-lighter);
      margin-block-start: 32px;
    }

    .book__reviews {
      grid-area: reviews;

      padding-block-start: 32px;
      border-block-start: 2px solid var(--c-gray-lighter);
      margin-block-start: 32px;
    }

    .book__reviews-heading {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
      justify-content: space-between;
      margin-block-end: 24px;
    }

    .book__reviews-title {
      margin-block-end: 0;
    }

    .book-like {
      width: fit-content;

      display: flex;
      align-items: center;
      gap: 8px;

      &[data-liked='true'] .book-like__count {
        color: hsl(0, 70%, 55%);
      }

      .book-like__btn {
        flex-shrink: 0;
        display: inline-block;
        line-height: 1;
        gap: 0.35rem;
        /* border: medium; */
        border-radius: 50%;
        padding: 0.3125rem;
        background: rgba(0, 0, 0, 0.6);
        cursor: pointer;
        color: var(--color-text-light);

        &:hover {
          opacity: 0.8;
        }
      }

      .book-like__btn[aria-pressed='true'] {
        color: hsl(0, 70%, 55%);
        background: none;
      }

      .book-like__icon {
        padding-top: 1px;
        vertical-align: middle;
        width: 32px;
        height: 32px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2px;
        transition: 120ms ease-in-out;
        transition-property: transform, fill;
      }

      .book-like__btn[aria-pressed='true'] .book-like__icon {
        fill: currentColor;
        transform: scale(1.1);
      }

      .book-like__count {
        font-weight: 500;
      }

      .book-like__hint {
        font-size: calc(14 / 16 * 1rem);
        color: gray;
      }
    }

    .book-interest {
      width: fit-content;

      .interest-btn[aria-pressed='true'] .register-text,
      .interest-btn[aria-pressed='true'] .icon-bookmark {
        display: none;
      }

      .interest-btn {
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;

        --btn-bg: hsl(210, 40%, 98%);
        --btn-border: hsl(210, 14%, 83%);
        --btn-text: hsl(210, 15%, 20%);
        --btn-hover: hsl(210, 40%, 94%);

        background: var(--btn-bg);
        border: 1px solid var(--btn-border);
        color: var(--btn-text);
        border-radius: 999px;
        padding: 10px 16px;
        font-weight: 500;
        transition:
          background-color 120ms ease,
          transform 80ms ease;

        &:hover:not([disabled]) {
          background: var(--btn-hover);
          transform: translateY(-1px);
        }

        &[aria-pressed='true'] {
          background: hsl(140, 45%, 92%);
          border-color: hsl(140, 35%, 70%);
          color: hsl(140, 35%, 25%);
        }
      }

      .danger-btn {
        cursor: not-allowed;
        display: flex;
        align-items: center;
        gap: 6px;

        --btn-bg: hsl(0, 40%, 95%);
        --btn-border: hsl(0, 14%, 83%);
        --btn-text: hsl(0, 15%, 20%);

        background: var(--btn-bg);
        border: 1px solid var(--btn-border);
        color: var(--btn-text);
        border-radius: 100vmax;
        padding: 10px 16px;
        font-weight: 500;
      }

      .interest-btn[aria-pressed='true'],
      .interest-btn.is-loading {
        opacity: 0.8;
        pointer-events: none;
      }

      .interest-btn[aria-pressed='false'] .interested-text,
      .interest-btn[aria-pressed='false'] .icon-check {
        display: none;
      }

      .interest-btn.is-loading .register-text,
      .interest-btn.is-loading .interested-text,
      .interest-btn.is-loading .icon-check,
      .interest-btn.is-loading .icon-bookmark {
        display: none;
      }

      .interest-btn .sending-text {
        display: none;
      }

      .interest-btn.is-loading .sending-text {
        display: inline-block;
      }
    }
  }
}