.panel-title {
  font-size: 30px;
  height: 3rem;
  margin: 0;
}

.layer-container {
  position: absolute;
  top: 3rem;
  bottom: 3rem;
  overflow: hidden;
  transition: width 0.2s ease-in-out;
}

.menu-container {
  background-color: white;
  height: calc(100% - 6rem);
  border: 1px solid black;
}

/* root panel */
.settings-group section {
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border-left: solid 0.5rem orange;
}

.settings-items section {
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

.settings-detail section {
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

.settings-detail.layer-container {
  transition: all 0.2s ease-in-out;
}

.settings-group {
  /* 4rem option menu + 1rem spacing + 1rem spacing*/
  right: calc(100% * 2 / 3 + 6rem);
}

.settings-items {
  /* 5rem = 4rem option menu + 1rem spacing*/
  right: 5rem;
  width: calc(100% * 2 / 3);
}

/* state of different panels
 * note menu-items is also aware of active state
 */

/**
 * -------------------------------------------
 * main focus is on group list
 */

body[data-active='group'] .settings-group {
  width: 14rem;
}

body[data-active='group'] .settings-detail {
  display: none;
}

/**
 * ===========================================
 */

/**
 * -------------------------------------------
 * main focus is on settings list
 */
body[data-active='list'] .settings-group {
  /* 4rem for icon + 0.5rem for border-left + 0.1rem for border right */
  width: 4.6rem;
}

body[data-active='list'] .settings-detail:not([data-type]) {
  width: 0;
  right: -4rem;
}

body[data-active='list'] .settings-detail[data-type='option-menu'] {
  width: 4rem;
  right: 0;
}

/**
 * ===========================================
 */

 /**
 * -------------------------------------------
 * main focus is on option-menu
 */
body[data-active='option-menu'] .settings-group {
  /* 4rem for icon + 0.5rem for border-left + 0.1rem for border right */
  width: 4.6rem;
}

/**
 * hide detail panel if it doesn't in option-menu mode.
 */
body[data-active='option-menu'] .settings-detail:not([data-type]) {
  width: 0;
  right: -4rem;
}

body[data-active='option-menu'] .settings-detail[data-type='option-menu'] {
  width: calc(100% / 3);
  right: 0;
}

/**
 * ===========================================
 */