@import "/packages/fraction-layout/variables.import.less";

.layout {
  sidebar {
    background-color: hsl(210, 12%, 23%);
    padding-left: 0;
    padding-right: 0;
    width: 4rem;

    @media @sm {
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      text-align: center;
    }

    .title {
      background-color: hsl(208, 70%, 52%); // todo: change to brand color
      display: inline-block;
      padding: 1rem;
      color: white;
      font-weight: 500;
      font-size: 1rem;
      width: 100%;
      img {
        margin-top: -0.25rem;
        width: 2rem;
      }
    }

    // back button
    .back {
      float: right;
      margin-top: 0.25rem;
    }

    // navigation list
    .list-group {
      color: hsl(221%, 14%, 22%) !important;
      background-color: hsl(210, 12%, 23%);
    }

    // unclickable nav header
    .list-group-header {
      color: hsl(210, 6%, 54%);
      background-color: hsl(210, 12%, 23%);
      &:hover {
        background-color: hsl(210, 12%, 23%);
      }
    }

    // nav item
    .list-group-item {
      border-color: transparent;
      border-radius: 0;
      color: hsl(210, 16%, 76%);

      &.inactive {
        background-color: hsl(210, 12%, 23%);
        &:hover {
          color: hsl(0, 0, 100%);
          background-color: hsl(210, 16%, 29%);
        }
      }

      &.active {
        color: hsl(0, 0, 100%);
      }
    }

    // nav subitem
    .indent {
      .list-group-item {
        background-color: hsl(210, 10%, 19%);
        padding-left: 2rem;
        &.active {
          background-color: hsl(120, 43%, 62%);
          border-color: hsl(120, 43%, 62%);
          color: hsl(0, 100%, 100%);
        }
      }
    }
  }
}