@import './general/controlcenter-general';

@menuItemFontSize: 1.1em;
@menuHeadingFontSize: 1.4em;
@menuIconSize: 1.6em;
@sidebarMarginTop: 20px;

.controlcenter-sidebar {
  margin-top: @sidebarMarginTop;
  max-width: 300px;

  .listview .lv-item {
    .flex-vertical-centered;

    color: @secondaryTextColor;

    &.menu-heading {
      border-left: 5px solid @primaryColor;
      color: @primaryColor;
      font-size: @menuHeadingFontSize;
      font-weight: bold;
      padding: 8px 0 8px 15px;

      .menu-title {
        margin-left: 5px;
      }
    }

    &.menu-item {
      font-size: @menuItemFontSize;
      padding: 8px 0 8px 23px;

      .mdi {
        color: lighten(@secondaryTextColor, 10%);
      }

      .menu-title {
        margin-left: 10px;
      }
    }

    .mdi {
      font-size: @menuIconSize;
    }

  }

  controlcenter-sidebar-menu-item {
    display: block;

    &.selected {
      background-color: @darkenBgColor;
    }
  }

  hr {
    margin: 10px 0;
  }
}

.controlcenter-subheader {
  .flex-vertical-centered;

  padding: 0 5px;
}

@media(max-width: @screen-md-min) {
  .controlcenter-sidebar {
    font-size: 0.9em;
    margin-top: 0;

    .listview .lv-item.menu-heading {
      border-left: none;
      padding-left: 20px;
    }
  }
}