bkdotcom/PHPDebugConsole

i.fa { margin-right: 0.33em; }
i.fa-lg { font-size: 1.33em; }
i.fa-plus-circle { opacity: 0.42; }
i.fa-calendar { font-size: 1.1em; }

.filter-hidden {
  display: none;
  &.m_group {
    display: list-item;
    > .group-header {
      display: none;
    }
    > .group-body {
      display: block !important;  // override collapsed
      margin-left: 0;
      border-left: 0;
      padding-left: 0;
    }
    &.filter-hidden-body {
      // this may be applied to a group that has a level-info, level-warn, level-error...
      > .group-body {
        display: none !important;
      }
    }
  }
}

.empty {
  &.hide-if-empty {
    display: none;
  }
  &.m_group .group-header {
    cursor: auto;
  }
  // &.classname {
  //   cursor: auto;
  // }
}

.vis-toggles span:hover,
[data-toggle=interface]:hover { background-color: rgba(0, 0, 0, 0.1); }

.vis-toggles .toggle-off,
.interface {
  &.toggle-off { opacity: 0.5; }
}

//
// strings - show more
//
ul.list-unstyled > li:has(.show-more-container) {
  text-indent: 0;
  padding-left: 0;
}
.show-more-container { display: inline; }
.show-more-wrapper {
  display: block;
  position: relative;
  height: 70px;
  overflow: hidden;
}
.show-more-fade {
  position: absolute;
  bottom: -1px;
  width: 100%;
  height: 55px;
  background-image: linear-gradient(to bottom, rgba(white, 0), rgba(white, 0.75));
  pointer-events: none;
}
.level-error .show-more-fade,
.m_error .show-more-fade { background-image: linear-gradient(to bottom, rgba($error-bg, 0), $error-bg); }
.level-info .show-more-fade,
.m_info .show-more-fade { background-image: linear-gradient(to bottom, rgba($info-bg, 0), $info-bg); }
.level-warn .show-more-fade,
.m_warn .show-more-fade { background-image: linear-gradient(to bottom, rgba($warn-bg, 0), $warn-bg); }
[title]:hover .show-more-fade {
  background-image: linear-gradient(to bottom, rgba(#c9c9c9, 0), #c9c9c9);
}
.show-more,
.show-less {
  display: table;
  box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  background-color: #eee;
}

//
// notifications
//
@at-root {
  .debug-noti-wrap {
    position: fixed;
    display: none;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1050;
    .debug-noti {
      display: table-cell;
      text-align: center;
      vertical-align: bottom;
      font-size: 30px;
      transform-origin: 50% 100%;
      &.animate {
        animation-duration: 1s;
        animation-name: expandAndFade;
        animation-timing-function: ease-in;
      }
    }
  }
  .debug-noti-table {
    display: table;
    width: 100%;
    height: 100%;
  }
}

@keyframes expandAndFade {
  from {
    opacity: 0.9;
    transform: scale(0.9, 0.94);
  }
  to {
    opacity: 0;
    transform: scale(1, 1);
  }
}