.arrangement {
  container-type: inline-size;
}

:has(#arrange-mode:checked) .disable-when-arranging {
  cursor: not-allowed;
  filter: grayscale(100%) contrast(0.5);
  opacity: 0.5;
  pointer-events: none;
}

.arrangement__container {
  &:where(:has(#arrange-mode:checked)) {
    .hide-when-arranging {
      display: none;
    }

    .arrangement__item {
      cursor: move;

      * {
        pointer-events: none;
      }

      .btn:not(.arrangement__handle) {
        opacity: 0.3;
      }

      & {
        .btn:is(.arrangement__handle) {
          display: flex;
        }
      }
    }

    .illustrations__thumbnail, .expressions__pill {
      border-color: var(--color-link);
    }
  }
}

.arrangement--adding {
  .arrangement__item {
    * {
      pointer-events: none;
    }
  }
}

.arrangement-cursor {
  border-style: dashed;
}

.arrangement-drag-image {
  background-color: var(--color-link);
  border-radius: 1rem;
  color: var(--color-ink-reversed);
  inset: auto 100% 100% auto;
  line-height: 2rem;
  padding: 0 1rem;
  position: fixed;
  text-wrap: nowrap;
}

.btn:is(.arrangement__handle) {
  display: none;
  flex-shrink: 0;
}

.arrangement-placeholder {
  background-color: var(--color-subtle-light);
  border: 1px dashed var(--color-subtle-dark);
  border-radius: 0.2em;
}

.arrangement-selected {
  background-color: var(--color-selected);
  animation: pulse 1s infinite alternate ease-in-out;
  border-radius: 0.2em;
}

.illustrations, .expressions {
  --hover-size: 0;

  display: grid;
  inline-size: auto;
  gap: var(--block-space) var(--inline-space);
  grid-template-columns: repeat(auto-fit, minmax(max(130px, 12cqi), 1fr));
  letter-spacing: -0.01ch;
  list-style: none;
  outline-offset: var(--inline-space-half);
  padding: 0;

  &:focus:not(:focus-visible) {
    outline: none;
  }
}

.expressions {
  .expressions__container & {
    display: flex;
    flex-direction: column;
    row-gap: calc(var(--block-space) * 0.3);
  }
}

.illustrations__container, .expressions__container {
  &:where(:has(#delete-mode:checked)) {
    .disable-when-deleting {
      cursor: not-allowed;
      filter: grayscale(100%) contrast(0.5);
      opacity: 0.5;
      pointer-events: none;
    }
  }

  &:where(:has(#add-mode:checked)) {
    .disable-when-adding {
      cursor: not-allowed;
      filter: grayscale(100%) contrast(0.5);
      opacity: 0.5;
      pointer-events: none;
    }
  }
}

.illustrations__leaf {
  border: solid 2px transparent;
  color: var(--color-ink);
  container-type: inline-size;
  display: inline-flex;
  flex-direction: column;
  margin: 0;
  scroll-margin-top: 8em;
  text-align: center;
}

.expressions__leaf {
  display: flex;
  align-items: center;
  column-gap: var(--inline-space-half);
  margin: 0;
}

.illustrations__thumbnail {
  border-radius: 0.3em;
  border: 1px solid var(--color-subtle-dark);
  display: block;
  overflow: hidden;
  position: relative;
  text-align: start;
  text-decoration: none;
  position: relative;
}

.leaf__add {
  --hover-color: var(--color-link);
  --hover-size: max(2px, 0.08em);

  display: none;

  #footer &,
  .expressions__container:where(:has(#add-mode:checked)) & {
    display: flex;
  }

  :is(.add-mode__button:has(input:checked)) {
    --btn-background: var(--color-link);
  }
}

/* Delete mode */
.leaf__delete {
  --hover-color: var(--color-negative);
  --hover-size: max(2px, 0.08em);

  display: none;

  #footer &,
  .illustrations__container:where(:has(#delete-mode:checked)) &,
  .expressions__container:where(:has(#delete-mode:checked)) & {
    display: flex;

    :is(.delete-mode__button:has(input:checked)) {
      --btn-background: var(--color-negative);
    }
  }

  .illustrations__container & .btn {
    inset-block-start: 0.5em;
    inset-inline-end: 0.5em;
    position: absolute;
    z-index: 1;
  }
}

.expressions__container:not(:has(.expressions__leaf)) .disable-when-empty,
.illustrations__container:not(:has(.illustrations__leaf)) .disable-when-empty {
  cursor: not-allowed;
  filter: grayscale(100%) contrast(0.5);
  opacity: 0.5;
  pointer-events: none;
}