:host {
  --left-column-width: calc(50% - 4px);
  --tab-bar-height: 32px;
  /* 5x LitWidget.header.height */
  --right-column-min-section-content-height: 180px;

  flex: 1;
  display: flex;
  flex-direction: column;
  background: #f5f9fa;
  max-height: calc(100hv - 77px);   /* lit-app-bar is 77px tall */
}

.outer-container {
  display: flex;
  flex-direction: row;
  height: 100%;
  max-height: 100%;
  /* full-width, overflow if window is < 1000px */
  min-width: 1000px;
  max-width: 100vw;
  padding: 0 16px;
  overflow: hidden;
}

.outer-container-centered {
  align-self: center;
  /* 1000px wide unless window is narrower */
  width: 100vw;
  min-width: unset;
  max-width: 1000px;
}

#left-column,
#right-column {
  position: relative;
  height: 100%;
  max-height: 100%;

  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#left-column {
  flex-shrink: 0;
  min-width: 20%;
  width: var(--left-column-width);
  max-width: 80%;
}

#right-column {
  flex-grow: 1;
}

.group-area {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--lit-mintonal-p-1);
}

#upper-right {
  --upper-tab-bar-height: calc(
    var(--upper-tab-bar-visible) * var(--tab-bar-height)
  );
  min-height: calc(
    var(--right-column-min-section-content-height) + var(--upper-tab-bar-height)
  );
  height: var(--upper-height);
  max-height: var(--upper-height);
}

#lower-right {
  flex-grow: 1;
  min-height: calc(
    var(--right-column-min-section-content-height) + var(--tab-bar-height)
  );
  max-height: calc(100% - var(--upper-height));
  margin-top: 8px;
}

.components-group-holder {
  --top-offset: var(--tab-bar-height);
  position: absolute;
  top: var(--top-offset);
  overflow: hidden; /* no scrollbars, for they are the path to the dark side */
  display: flex;
  flex-grow: 1;
  visibility: hidden;
  height: calc(100% - var(--top-offset));
  max-height: calc(100% - var(--top-offset));
  width: 100%;
  max-width: 100%;
  padding: 8px 0;
  box-sizing: border-box;
}

#left-column .components-group-holder {
  --top-offset: calc(var(--left-tab-bar-visible) * var(--tab-bar-height));
}

#upper-right .components-group-holder {
  --top-offset: var(--upper-tab-bar-height);
}

.components-group-holder.selected {
  visibility: visible;
}

lit-widget-group {
  padding: 0;
  box-sizing: border-box;
}

lit-widget-group[maximized] {
  padding: 0;
}

.expander {
  background: transparent;
  flex-shrink: 0;
  height: 100%;
  min-width: 8px;
  width: 8px;
}

.expander-drag-target{
  background: transparent;
  width: 100%;
  height:100%;
  opacity: 0;
}

.tab-bar {
  --bar-button-offset: 0;

  height: var(--tab-bar-height);
  padding: 0 8px;

  display: flex;
  flex-direction: row;
  align-items: center;

  color: var(--lit-neutral-700);
  background: white;
  border: 1px solid var(--lit-neutral-300);
}

.tab-bar .preset-buttons {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.tab-bar .preset-buttons .icon-button[disabled] {
  color: var(--lit-neutral-500);
}

#drag-container{
  height: 100%;
  margin: 0 24px;

  display: flex;
  align-items: center;
}

#drag-handler {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: ns-resize;
}

.tabs-container {
  height: 100%;
  max-width: 100%;
  padding: 2px 0;

  display: flex;
  flex-direction: row;
  flex-grow: 1;
  align-items: end; /* bottom */

  font-size: 12px;
}

#center-bar .tabs-container {
  /* 120 = 48 for preset buttons + 3 * 24 for the drag handle and its margin. */
  max-width: calc(100% - 120px);
}

.tab {
  font-family: 'Google Sans', sans;
  border-bottom: 2px solid #dadce0;
  box-sizing: border-box;
  cursor: pointer;
  padding: 4px 16px;
  text-align: center;
  white-space: nowrap;
}

.tab:hover{
  background: #eee;
}

.tab.selected {
  font-weight: bold;
  border-bottom: 2px solid rgb(47, 140, 155);
  color: rgb(47, 140, 155);
}

.drag-icon {
  pointer-events: none;
}
