$header-color: #2196f3;
$aside-width: 260px;
$small-device-width: 800px;

#app {
   height: 100%;
}

.main {
   flex-grow: 1;
   padding: 1rem;
   transition: all 0.2s linear;
   height: 100%;
   box-sizing: border-box;
   display: block;
   overflow: auto;
}

.theme-dark {
   .aside {
      background: #3b3a3c;

      .cxb-link.cxs-active {
         color: #7887ab;
      }
   }

   .header {
      background: #41495b;
   }
}

.theme-frost {
   .aside {
      background: #f3f5f7;

      .cxb-link.cxs-active {
         color: #24b5d6;
      }
   }

   .header {
      background: #93a5bd;
   }
}

.theme-aquamarine {
   .aside {
      //    background: #f3f5f7;

      .cxb-link.cxs-active {
         color: darken(#49d2e4, 10);
      }
   }

   .header {
      background: linear-gradient(to top right, darken(#49d2e4, 15), #49d2e4);

      .title a {
         color: #ffffb0;
      }
   }
}

.theme-material-dark {
   .header {
      background: rgba(38, 166, 154, 0.09);

      a {
         color: #ffb550;
         font-weight: 500;
      }

      .tabs {
         min-height: 3rem;
         margin-top: 1rem;
         color: rgba(white, 0.87);

         .cxb-tab.cxm-line {
            color: rgba(white, 0.87);

            &:hover {
               border-color: rgba(white, 0.16);
            }

            &.cxs-active {
               border-color: #4db6ac;
               color: rgba(white, 0.87);
            }
         }
      }

      h2 {
         color: rgba(white, 0.87);
      }
   }

   .aside {
      background: rgba(255, 255, 255, 0.07);

      .cxb-link.cxs-active {
         color: #4db6ac;
      }

      dt {
         font-weight: 500;
      }

      dd {
         color: rgba(#fff, 0.6);
      }
   }
}

.theme-space-blue {
   .aside {
      background: #303f50;

      .cxb-link.cxs-active {
         color: hsl(171, 57%, 55%);
      }
   }

   .header {
      background-color: #33465b;

      .tabs {
         .cxb-tab.cxm-line {
            &.cxs-active {
               border-color: rgba(#4dcbac, 0.8);
            }
         }
      }

      .title a {
         color: #ffcd78;
      }

      h2 {
         color: rgba(white, 0.77);
      }
   }
}
