/* -------------------------------------------------------------------
   Layout panel
   ------------------------------------------------------------------- */
.layout-panel-item {
  /* background-color: #282828;*/
  width: 100%;
  cursor: default;
  color: var(--theme-color-fg-default);
  position: relative;
  /* border-bottom: 1px solid #222222;*/
}

.layout-panel-item-hover-indicator {
  background-color: var(--theme-color-bg-2);
}

.layout-panel-header {
  color: var(--theme-color-fg-highlight);
  padding-left: 10px;
  font: 12px var(--font-family-bold);
  line-height: 35px;
}

.layout-panel-divider {
  border-bottom: 1px solid var(--theme-color-border-default);
}

.layout-panel-item-label {
  font: 12px var(--font-family-regular);
  line-height: 30px;
}

.layout-panel-item-selected {
  background-color: var(--theme-color-primary);
  position: absolute;
  width: 100%;
  height: 30px;
}

.layout-panel-sheet-label {
  color: var(--theme-color-fg-highlight);
  font: 12px var(--font-family-regular);
  line-height: 35px;
  color: var(--theme-color-fg-default-shy);
}

.layout-panel-sheet-selector:hover .layout-panel-sheet-label {
  color: var(--theme-color-fg-highlight);
}

.layout-panel-expand-more-icon {
  content: url('../assets/icons/expand_more.svg');
  width: 20px;
  height: 20px;
  opacity: 0.6;
}

.layout-panel-sheet-selector:hover .layout-panel-expand-more-icon {
  opacity: 1;
}

.layout-panel-expand-less-icon {
  content: url('../assets/icons/expand_less.svg');
  width: 20px;
  height: 20px;
  opacity: 0.6;
}

.layout-panel-sheet-selector:hover .layout-panel-expand-less-icon {
  opacity: 1;
}

.layout-panel-sheet-item {
  font: 12px var(--font-family-regular);
  line-height: 30px;
  color: var(--theme-color-fg-default);
  padding-left: 10px;
}

.layout-panel-sheet-item:hover {
  background-color: var(--theme-color-bg-2);
}

.layout-panel-component-item {
  font: 12px var(--font-family-regular);
  line-height: 30px;
  color: var(--theme-color-fg-default);
  padding-left: 10px;
}

.layout-panel-component-item:hover {
  background-color: var(--theme-color-bg-2);
}

.layout-panel-edit-button {
  width: 30px;
  height: 30px;
  background-color: transparent;
  color: var(--theme-color-fg-muted);
  border: none;
}

.layout-panel-edit-button:hover {
  background-color: var(--theme-color-bg-2);
  color: var(--theme-color-fg-highlight);
}

.layout-panel-dark-input {
  /* background-color: #222222;
    color: #dddddd;*/
  border: none;
  display: block;
  padding: 0 0 0 10px;
  box-sizing: border-box;
  font: 12px var(--font-family-regular);
}
