src/components/RedactionPageGroup/RedactionItem/RedactionItem.scss
.redaction-item {
  display: flex;
  align-items: center;
  padding: 12px 16px 12px 16px;
  position: relative;

  &:hover {
    background-color: var(--view-header-button-hover);
    cursor: pointer;
  }

  &:focus-visible {
    outline: var(--focus-visible-outline);
  }

  &.modular-ui {
    &:hover:not(:disabled):not(.disabled) {
      // TODO: remove this background color and the one above when there is no legacy UI
      background-color: transparent;
      box-shadow: inset 0 0 0 1px var(--hover-border);
    }
  }

  .redaction-item-button {
    position: absolute;
    width: 100%;
    height: 100%;
    inset-block-start: 0;
    inset-inline-start: 0;
  }
}

.redaction-item-selected {
  &.modular-ui {
    box-shadow: inset 0 0 0 1px var(--focus-border);
  }

  background-color: var(--view-header-button-active) !important;
}

.redaction-item-info {
  flex: 1;
  padding-inline-start: 18px;
  padding-inline-end: 20px;
}

.redaction-item-preview {
  font-size: 13px;
  color: var(--text-color);
}

.redaction-item-date-author {
  font-size: 10px;
  color: var(--faded-text);
}

.redaction-item-label-text {
  font-size: 10px;
  margin: 2px 0;
}

.redaction-item-delete.customUI {
  &:hover {
    box-shadow: inset 0 0 0 1px var(--hover-border);
  }
}
