bkdotcom/PHPDebugConsole

&.debug-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  z-index: 1049;

  // debug-drawer is closed (pushed offscreen) by default
  height: 100px;
  transform: translateY(100px);
  transition: all 0.5s;

  > * {
    box-sizing: border-box;
  }

  .debug-pull-tab {
    display: inline-block;
    opacity: 1;
    position: absolute;
    height: 25px;
    top: -25px;
    margin-left: 20px;
    border: 1px solid #000;
    border-bottom-width: 0;
    border-radius: 5px 5px 0 0;
    padding: 4px 14px;
    font-size: 16px;
    background: $lite-grey;
    cursor: pointer;
    transition: all 0.5s;
    &:hover {
      background: darken($lite-grey, 10%);
    }
    .debug-error-counts {
      margin-left: 0.5em;
    }
    .badge {
      display: none;
    }
    .fa-spinner {
      display: none;
    }
  }

  .debug-resize-handle {
    display: block;
    position: absolute;
    top: -3px;
    height: 4px;
    width: 100%;
    opacity: 0;
    border-top: 1px solid $border-color;
    border-bottom: 1px solid $border-color;
    background: darken($lite-grey, 10%);
    transition: all 0.25s ease-out;
    // transition-timing-function: ease-out;
  }

  &.debug-drawer-open {
    transform: translateY(0);
    height: auto;
    // z-index: 1049;
    .debug-pull-tab {
      opacity: 0;
      transform: translateY(25px);
      // .fa-bug {
      //   display: none;
      // }
      .fa-spinner {
        display: inline-block;
      }
    }
    & .debug-resize-handle {
      cursor: ns-resize;
      &:hover {
        opacity: 1;
      }
    }
  }

  @at-root html.debug-resizing {
    cursor: ns-resize !important;
    .debug-drawer {
      // disable transition when resizing
      transition: none;
      .debug-resize-handle {
        opacity: 1;
      }
    }
  }
}