.btn.list-handle__wrapper {
  --upload-container-box-shadow: 0px 0px 0px 1px #B9A174, inset 2px 2px 12px rgba(0, 0, 0, 0.12), inset -2px -3px 8px rgba(255, 255, 255, 0.3);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--op-space-3x-small);
  width: 3.5rem;
  height: 4.6rem;
  cursor: pointer;
  background: linear-gradient(325.78deg, #EEE8DD -4.21%, #E0D6C2 106.21%);
  color: var(--op-color-neutral-base);
  border-radius: var(--op-radius-medium);
  box-shadow: var(--upload-container-box-shadow);
  box-sizing: border-box;
  font-size: var(--op-font-large);


  &:hover {
    cursor: pointer;
    background: unset;
  }

  &.list-handle__wrapper--book {
    box-shadow: var(--op-border-all) var(--op-color-purple);

    .list-handle__count { color: var(--op-color-purple); }
  }

  &.list-handle__wrapper--movie {
    box-shadow: var(--op-border-all) var(--op-color-alerts-notice-minus-one);

    .list-handle__count { color: var(--op-color-alerts-notice-minus-one); }
  }

  &.list-handle__wrapper--album {
    box-shadow: var(--op-border-all) var(--op-color-alerts-info-minus-two);

    .list-handle__count { color: var(--op-color-alerts-info-minus-two); }
  }

  &:focus {
    box-shadow: var(--button-shadow-active);
  }

  @media only screen and (max-width: 712px) {
    display: none;
  }
}

.list-handle__count {
  font-size: var(--op-font-2x-small);
}

.list-image {
  height: 50%;
}

.list-item {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  width: 100%;
  padding: var(--op-space-x-small) var(--op-space-x-small);
  border-radius: var(--op-radius-small);
  &:hover {
    background-color: var(--op-color-neutral-plus-seven);
  }
}

.list-item__image,
.list-item__image-placeholder {
  --list-item-image-width: calc(var(--op-size-unit) * 8);
  --list-item-image-height: calc(var(--op-size-unit) * 10);

  min-width: var(--list-item-image-width);
  width: var(--list-item-image-width);
  height: var(--list-item-image-height);
}

.list-item__image-placeholder {
  background-color: var(--op-color-neutral-plus-seven);
  border-radius: var(--op-border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.list-item__drag-handle {
  cursor: grab;
  touch-action: none;

  &:active {
    cursor: grabbing;
  }
}

.list-item__body {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--op-space-medium);
  width: 100%;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;

  @media only screen and (max-width: 712px) {
    flex-wrap: wrap;
  }
}

.list-entry {
  width: 100%;
  trix-toolbar { display: none; }

  trix-editor {
    background-color: var(--op-color-neutral-plus-eight);
    border: unset;
    min-height: 32rem;

    &:focus-visible {
      outline: none;
      box-shadow: none;
    }
  }
}