@import './RelationSvg.scss';

:root {
  --block-operation-display: block;
  --relation-link__options-display: block;
}

.MonacoDiffEditorRelation {
  position: relative;
  height: 100%;
  width: 100%;

  &__EditorList {
    display: flex;
    gap: 2rem;
    height: 100%;
    width: 100%;
    &__Item {
      flex: 1 1 calc(50% - 1rem);
      max-width: calc(50% - 1rem);
      width: calc(50% - 1rem);
      height: 100%;
    }
  }

  &__RelationSvg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;

    pointer-events: none;

    .relation-link {
      &__options {
        pointer-events: all;
        display: var(--relation-link__options-display, block);
      }
    }

    .relation-options {
      display: flex;

      margin: 0;
      width: 100%;
      height: 100%;
      padding: 0;

      justify-content: flex-end;

      &__detail {
      }
      &__delete {
      }
    }

    @include relationSvg;
  }
}