@import "red_base/variables";
@import "red_base/mixins";

aside {
  background: $peter_river;
  padding: 0 !important;
  border-radius: 4px;
  margin-top: 20px;

  ul {
    list-style: none;
    margin-bottom: 0;

    li {
      p {
        margin: -10px 0 0;
        padding: 5px 5px 10px;
        width: 100%;
        color: lighten($lightergray, 4%);
        text-shadow: 0 1px 1px $darkgray;
        display: inline-block;
      }
      padding: 10px 0px 0px 0px;
      border-bottom: 1px solid darken($peter_river, 5%);
      //border-right: 1px solid $lightergray;
      cursor: pointer;


      &.active {
        background: $dashboard-background;
        border-right: none;
        color: $darkergray;
      }

      &:hover {
        &:not(.active) > p {
          //background: darken(white, 2%);
          //color: darken($lightgray, 10%);
          color: white;
        }
      }

      &:first-child {
        border-top: 1px solid $lightergray;
        border-radius: 0px 4px 0 0;

      }
      i {
        padding-left: 5px;
        padding-right: 5px;

      }

    }
  }

  .submenu {
    background: white;
    margin: 0px 0;
    font-size: 0.8em;
    display: none;
    li {
      color: $darkgray;
      border:none;
      cursor: pointer;
      padding: 5px 10px;
      @include transition(all 300ms linear);
      &:hover  {
        padding: 5px 20px;
        @include transition(all 300ms linear);
      }
    }
  }
  .brand {
    border-bottom: 1px solid $lightergray;
    //border-right: 1px solid $lightergray;
    margin-top: -5px;
    padding: 50px 20px 20px;
    line-size: 1;
    border-radius: 0 0 4px 0px;

    h1 {
      font-size: 1.3em;
      margin: 0;
      color: white;
    }
    span {
      color: $lightergray;
      font-size: 0.8em;
      margin: 0;
    }
  }
}