.layout {
  position: absolute;
  inset: 0;
}

.layout__resize {
  @include absolute(0, auto, 0, auto);

  width: 5px;
  z-index: $z-index-layout-resize;

  &:hover {
    cursor: col-resize;

    &::before {
      @include absolute(0, auto, 0, 0);

      content: '';
      background-color: $palette-neutral-400;
      width: 3px;
    }
  }
}

.layout__col-1 {
  position: absolute;
  z-index: $z-index-layout-col-1;
  left: 0;
  top: 0;
  bottom: 0;
  width: 240px;
}

.layout__col-2 {
  position: absolute;
  z-index: $z-index-layout-col-3;
  inset: 0 0 0 240px;
}

.layout__col-2-scroll {
  @include absolute(0);

  overflow: auto;

  &.layout__col-2-scroll--white-background {
    background-color: $white;
  }
}

.layout__col-2-1 {
  position: absolute;
  z-index: $z-index-layout-col-3-1;
  left: 0;
  top: 0;
  right: 0;
  height: 51px;
}

.layout__col-2-2 {
  position: absolute;
  z-index: $z-index-layout-col-3-2;
  inset: 51px 0 0;
}

.layout__col-3 {
  position: absolute;
  z-index: $z-index-layout-col-3;
  height: 100%;
}
