ul {
  list-style-type: none;
}

ul, li {
  margin: 0;
  padding: 0;
  /* have a default height for setting vertical align */
  height: 4rem;
}

.menu-item {
  width: calc(100% - 4.4rem);
  height: 4rem;
  font-size: 20px;
  color: black;
  display: inline-block;
  /* add padding 4rem for left space for icon */
  padding: 0.2rem 4.2rem 0.2rem 0.2rem;
}

.menu-item span {
  width: 100%;
  display: inline-block;
  line-height: 4rem;
}

.settings-group .menu-item span {
  text-align: right;
}

.settings-items .menu-item {
  width: calc(100% - 6rem);
  padding-left: 1rem;
  padding-right: 5rem;
}

.settings-items .menu-item span[data-value]:after {
  content: attr(data-value);
  position: absolute;
  right: 0;
  /**
   * The .settings-items is 2/3 window size, and the .settings-detail is 1/3
   * window size with no margin right.
   * We need to calculate the space of .settings-detail while
   * .settings-detail shows up:
   *   the left position of .settings-items is 2/3 window size + 5rem
   *   the left position of .settings-detail is 1/3 window size
   *   the width of menu item 100% = (1/3 windows size + 5rem)
   *   the space covered by .settings-detail is 100% - 5rem
   */
  width: calc(100% / 2 - 5rem);
}

.settings-detail .menu-item {
  width: calc(100% - 2rem);
  padding-left: 1rem;
  padding-right: 1rem;
}

.option-menu .menu-item {
  width: calc(100% - 6rem);
  margin-left: 4rem;
}

.option-menu .menu-item .selected {
  font-weight: bold;
}

/**
 * -------------------------------------------
 * main focus is on settings list
 */
body[data-active='list'] .settings-group .menu-item {
  width: calc(100% - 4rem);
  padding: 0 4rem 0 0;
}

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

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

/**
 * -------------------------------------------
 * main focus is on option menu
 */
body[data-active='option-menu'] .settings-group .menu-item {
  width: calc(100% - 4rem);
  padding: 0 4rem 0 0;
}

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

body[data-active='option-menu'] .settings-items ul {
  /**
   * The .settings-items is 2/3 window size, and the .settings-detail is 1/3
   * window size with no margin right.
   * We need to calculate the left space of .settings-items when
   * .settings-detail shows up:
   *   the left position of .settings-items is 2/3 window size + 5rem
   *   the left position of .settings-detail is 1/3 window size
   *   the size of option menu is 1/3 window size + 5rem
   */
  width: calc(100% / 2 + 5rem);
}

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