bkdotcom/PHPDebugConsole

& {
  transform: scale(1); // so that sidebar gets attached here
}

.debug-sidebar {

  $sidebar-w: 119px;
  $toggle-w: 7px;
  $trans-time: 0.33s;

  position: absolute;
  box-sizing: border-box;
  width: $sidebar-w + $toggle-w;
  background: $lite-grey;
  height: 100%;
  transform: translateX(-$sidebar-w);
  transition: transform $trans-time;

  button {
    width: 100%;
  }
  input[type=checkbox] {
    display: none;
  }
  label {
    font-weight: normal;
  }

  + .tab-body {
    margin-left: 6px;
    padding-left: 10px;
    transition: margin-left $trans-time;
  }

  &.no-transition + .tab-body {
    transition: none;
  }

  .collapse { display: none; }
  .sidebar-content {
    padding: 0 11px 0 4px;
    opacity: 0;
    overflow: hidden;
  }

  &.show {
    transform: translateX(0);
    .expand { display: none; }
    .collapse { display: block; }
    + .tab-body {
      margin-left: $sidebar-w + $toggle-w;
    }
    .sidebar-content {
      opacity: 1;
      transition: opacity 0.33s;
    }
  }

  .sidebar-toggle {
    position: absolute;
    box-sizing: border-box;
    right: 0;
    top: 0;
    height: 100%;
    width: $toggle-w;
    background: $lite-grey;
    border-left: 1px solid $border-color;
    border-right: 1px solid $border-color;
    cursor: pointer;
    display: flex;
    color: $border-color;
    text-align: center;
    z-index: 1;
    &:hover {
      color: $grey-text;
      background: darken($lite-grey, 10%);
    }
    > div {
      margin: auto;
      padding-left: 1px;
    }
  }

  // see https://stackoverflow.com/a/40678740/1371433
  .debug-filters {
    position: relative;
    margin: 0 -4px 10px -4px;
    ul {
      margin-left: 0;
    }
    li {
      text-indent: 0;
      padding-left: 10px;
    }
    > li {
      padding-left: 4px;
      > *:first-child {
        padding-top: 3px;
        padding-bottom: 3px;
      }
      > ul {
        margin-left: -10px;
        > li {
          padding-left: 32px;
        }
      }
    }
    label {
      padding: 2px 0 2px 100%;
      white-space: nowrap;
      &.disabled span {
        /*
        color: #818a91
        */
        opacity: 0.5;
      }
    }
    label,
    ul ul {
      margin-left: -100%;
      padding-left: 100%;
    }
  }

  .fa-times-circle { color: $error-fg; }
  .fa-warning { color: $warn-fg; }
  .fa-info-circle { color: $info-fg; }

  .toggle {
    cursor: pointer;
    &.active {
      background: darken($lite-grey, 10%);
      &:hover {
        background: darken($lite-blue, 10%);
      }
    }
    &:hover,
    &:hover + ul {
      background: $lite-blue;
      .toggle.active {
        background: darken($lite-blue, 10%);
      }
    }
  }

  /*
  .expand-all {
    font-size: 1.25em;
  }
  */
}