.comic-list {
  display: grid;
  grid-template:
    [list] 'list separator details' 1fr
    / [list] 28rem [line] 0.0625rem [details] 1fr;
  column-gap: 1rem;
}

.comic-list__inner {
  display: flex;
  flex-flow: row wrap;
  grid-area: list;
  height: var(--page-height);
  overflow: auto;
}

.comic-list__item {
  display: grid;
  width: 100%;
  grid-template-columns: [icon] 4rem [title] 1fr;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 0.0625rem solid var(--control-border-color);
  cursor: pointer;
  color: var(--black);
  transition:
    background 0.3s,
    color 0.3s;

  &:hover {
    background: var(--primary-color-alpha-25);
  }

  &.is--active {
    background: var(--primary-color);
    color: var(--white);
  }
}

.comic-list__icon {
  object-fit: scale-down;
  height: 4rem;
  width: 4rem;
}

.comic-list__description {
  display: flex;
  flex-flow: column nowrap;
}

.comic-list__title {
  font-size: 1.25rem;
}

.comic-list__separator {
  grid-area: separator;
  height: var(--page-height);
  width: 0.0625rem;
  background: var(--control-border-color);
}

.comic-list__details {
  gap: 1rem;
  display: flex;
  flex-flow: column;
  height: var(--page-height);
}

.comic-pages {
  overflow: auto;
  height: calc(var(--page-height) - var(--title-font-size) - 0.5rem);
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;

  h3 {
    width: 100%;
    font-size: 2rem;
  }
}

.comic-pages__image {
  object-fit: scale-down;
  height: 35rem;
  width: auto;
}

.new-page-list {
  display: flex;
  flex-flow: row wrap;
  align-content: start;
  gap: 1rem;
  height: calc(
    var(--page-height) - var(--title-font-size) - var(--input-header-font-size) - var(--button-container-margin-top) -
      var(--control-height) - var(--control-height)
  );

  &.is--review {
    height: auto;
    padding-bottom: 1rem;
  }
}

.new-page-list__image {
  object-fit: scale-down;
  height: 10rem;
  width: auto;
}

.new-page-list__add {
  width: 100%;
}

.new-page-publishing__status {
  display: flex;
  flex-flow: column;
  gap: 0.25rem;
  align-items: center;
}

.new-page-publishing__status-icon {
  display: flex;
  flex-flow: row;
  justify-content: center;
}