:host{
  flex: var(--flex);
  min-width: var(--width);
  width: var(--width);
  --lit-group-header-height: 36px;
}

.outside {
  position: relative;   /* Necessary so that the expander positions correctly */
  width: 100%;
  height: 100%;
}

.wrapper {
  height: 100%;
  box-sizing: border-box;
  background-color: white;
  background-clip: content-box;
  display: flex;
  flex-direction: column;
}

.header {
  height: var(--lit-group-header-height);
  display: flex;
  padding: 0 8px;
  line-height: 27px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgb(218, 220, 224);
  box-sizing: border-box;
  gap: 8px;
}

.title {
  font-size: 14px;
  font-family: 'Google Sans', sans;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 1 1 auto;
}

.min-button {
  text-align: right;
}

.direction-toggle {
  --mdc-icon-button-size: 24px;
  --mdc-icon-font: 'Material Icons Outlined';
}

.scroll-toggle {
  --mdc-icon-button-size: 24px;
}

.holder {
  height: calc(100% - var(--lit-group-header-height));
  display: flex;
  flex-direction: column;
  position: relative;
  flex: 1;
}

.component-row {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
}

.component-column {
  display: flex;
  flex-direction: column;
}

lit-widget {
  min-height: 128px;
}

/**
 * Maximized state
 */
:host([maximized]) {
  margin: 0;
  padding: 0;
  --lit-maximized-vpad: 15px;
  --lit-maximized-hpad: 45px;
  /* Override whatever size this would have been in-line. */
  width: calc(100vw - 2*var(--lit-maximized-hpad)) !important;
  min-width: calc(100vw - 2*var(--lit-maximized-hpad)) !important;
  position: fixed;
  z-index: 2;
  /* Fix size to fill the main modules area, but not cover toolbars. */
  /* --top-toolbar-offset and --modules-area-height are set by modules.ts. */
  top: var(--top-toolbar-offset);
  height: calc(var(--modules-area-height) - 2*var(--lit-maximized-vpad));
  left: 0px;
}

:host([maximized]) .outside {
  padding: var(--lit-maximized-vpad) var(--lit-maximized-hpad);
  background: rgba(4, 29, 51, .47);
}

:host([maximized]) .wrapper {
  padding: 0;
}

/**
 * Minimized state
 */
:host([minimized]),
:host([minimized]) .header,
:host([minimized]) .outside,
:host([minimized]) .wrapper {
  min-width: var(--lit-group-header-height);
  width: var(--lit-group-header-height);
  max-width: var(--lit-group-header-height);
}

:host([minimized]) .header:not(.tooltip-text){
  padding-top: 8px;
  padding-bottom: 2px; /* top icon should align with horizontal toolbar */
  padding-left: 0;
  padding-right: 0;
  height: 100%;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}

:host([minimized]) .header > * {
  margin: 2px 0;
}

:host([minimized]) mwc-icon {
  /* Undo outer rotation, so these are oriented normally. */
  transform: rotate(90deg);
}

:host([minimized]) lit-tooltip {
  /* Undo outer rotation, so these are oriented normally. */
  transform: rotate(180deg);
  writing-mode: horizontal-tb;
}

:host([minimized]) .title {
  text-align: right;
  cursor: pointer;
}

:host([minimized]) .holder {
  height: 0;
}

:host([minimized]) lit-widget{
  display: none;
}
