@import "scss/variables.scss";

.m-synthetic-window-layers {

  .m-tree-node-layer {
    .immutable {
      background: $color-purple-7;
    }
    .is-component-instance {
      background: $color-purple-7;
    }
    .is-component-root {
      background: $color-green-10;
    }
    .is-slot-container {
      background: $color-tan-10;
    }
  }
  .label {
    padding-top: 4px;
    padding-bottom: 4px;
    cursor: default;
    user-select: none;

    &.hovering {
      box-shadow: inset 0px 0px 0px 2px $color-aqua-1;
    }
    &.selected {
      color: white;
      background: $color-aqua-1;
    }

    i {
      margin-right: 4px;
    }
  }
}

.m-synthetic-document-layer {
  > .label {
    padding-left: 22px;
  }
}

.m-synthetic-node-layer {
  position: relative;
  > .insert-line {
    background: $color-sky-blue-3;
    border: 1px solid white;
    box-sizing: content-box;
    height: 2px;
    width: 100%;
    right: 0;
    position: absolute;
    transform: translateY(-50%);
    opacity: 0;
    z-index: 5;
    &.hovering {
      opacity: 1;
    }
  }
}