$color-addition-dark: var(--color-addition-dark);
$color-addition-light: var(--color-addition-light);
$color-deletion-dark: var(--color-deletion-dark);
$color-deletion-light: var(--color-deletion-light);

.comparison {
  --color-addition-dark: #a6f3a6;
  --color-addition-light: #ebffeb;
  --color-deletion-dark: #f8cbcb;
  --color-deletion-light: #ffebeb;

  @include dark-theme() {
    --color-addition-dark: #033a16;
    --color-addition-light: #045720;
    --color-deletion-dark: #67060c;
    --color-deletion-light: #8e070f;
  }

  &__child-object {
    border-top: 1px dashed theme('colors.border-furniture');
    padding: 1em;

    dd {
      margin-inline-start: 40px;
    }

    &:first-child {
      border-top: 0;
    }

    &.addition {
      background-color: $color-addition-light;
    }

    &.deletion {
      background-color: $color-deletion-light;
    }
  }

  &__list {
    margin-top: 0;
    margin-bottom: -1em;
  }

  span.addition {
    background-color: $color-addition-dark;
  }

  span.deletion {
    background-color: $color-deletion-dark;
  }

  .preview-image {
    display: inline-block;

    &.addition,
    &.deletion {
      padding: 5px;
      margin-inline-end: 5px;
      border-style: solid;
      border-width: 1px;
    }

    &.addition {
      background-color: $color-addition-light;
      border-color: $color-addition-dark;
    }

    &.deletion {
      background-color: $color-deletion-light;
      border-color: $color-deletion-dark;
    }

    img {
      display: block;
    }
  }
}