:host {
  position: absolute;
  // border: 1px solid black;
  background-color: transparent;
  display: flex;
  flex-direction: row;
}

.wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.header {
  background-color: lightgray;
  border-bottom: 1px solid black;
  padding: 2px 4px 0px 5px;
  display: flex;
  flex-direction: row;
}

.resize {
  background-color: inherit;
}

.horizontal {
  height: 0px;
  width: 100%;
}

.vertical {
  height: 100%;
  width: 0px;
}

.top {
  cursor: ns-resize;
  // margin-top: 2px;
  border-top: 1px solid black;
  background-color: lightgray;
}

.bottom {
  cursor: ns-resize;
  // margin-bottom: 2px;
  border-bottom: 1px solid black;
  background-color: white;
}

.left {
  cursor: ew-resize;
  // margin-left: 2px;
  border-left: 1px solid black;
}

.right {
  cursor: ew-resize;
  // margin-right: 2px;
  border-right: 1px solid black;
}

.grab {
  cursor: grabbing;
}

.content {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 2px;
  background-color: white;
  overflow: scroll;
}

.clickable {
  cursor: pointer;
}

.icon {
  float: right;
}

.title {
  flex: 1;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
