.clips-popup {
  position: absolute;

  .popup-menu {
    width: 8.5em;
    margin-left: -4.25em;
    padding: 0;
    z-index: 8;
    background: transparent;

    [data-color-scheme="dark"] & { margin-top: 1em; }

    .btn--icon-clip { background: var(--color-bg--message-content); }
  }

  form { width: 100%; }
}

.clip-item {
  padding: 1.5em !important;
  width: 95% !important;
  max-width: 50rem;
  margin-left: 2rem !important;

  @media (min-width: 40em) { margin: 0 auto !important; }

  &:nth-child(even) { transform: rotate(0.5deg); }
  &:nth-child(odd) { transform: rotate(-0.5deg); }
}

.clip-item__name {
  outline: none;
}

.clip-item__avatar {
  position: absolute !important;
  top: 2rem;
  left: -3rem;
  padding: 0;

  .clip-item:focus-within & {
    box-shadow: 0 0 0 2px var(--color-focus-ring);
  }
}

.clip-item__content {
  line-height: 1.2;
}

.clip-item__delete {
  position: absolute !important;
  right: var(--half-space);
  bottom: var(--half-space);
}