@import './var.less';

.menu {
  display: flex;
  flex: 1;
  align-items: stretch;
  align-self: stretch;
  background-color: @menu-background-color;
}

.leftItem {
  width: 324px;
  height: 98px;
  font-size: 30px;
  font-weight: bold;
  color: @menu-left-item-font-color;
  padding-left: 54px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border-left-width: 6px;
  border-left-style: solid;
  border-left-color: transparent;
  &:active {
    background-color: @menu-left-item-color;
  }
}

.leftActive {
  background-color: @menu-left-item-active-background-color;
  border-left-color: @brand-primary;
}

.rightItem {
  height: 98px;
  display: flex;
  align-items: center;
  font-size: 30px;
  font-weight: 400;
  color: #666666;
  border-bottom: 1px solid #e2e2e2;
  &:active {
    opacity: 0.6;
  }
}

.left {
  background: #f0f3f6;
  overflow-y: scroll;
  flex-direction: column;
}

.right {
  flex: 1;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 42px;
}

.elderly {
  font-weight: bold;
  .leftItem,
  .rightItem {
    font-size: 40px;
  }
  .leftItem {
    border-left-width: 8px;
  }
}
