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-mix(in lch, var(--color-button-fg) 20%, transparent);
}

.vis-toggles .toggle-off,
.interface.toggle-off,
.interface.toggle-off * {
  color: color-mix(in lch, var(--color-fg) 50%, transparent);
}

//
// 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, rgb(from var(--color-bg) r g b / 0), rgb(from var(--color-bg) r g b / 0.75));
  pointer-events: none;
}
.level-error .show-more-fade,
.m_error .show-more-fade {
  background-image: linear-gradient(to bottom, rgb(from var(--color-error-bg) r g b / 0), var(--color-error-bg));
}
.level-info .show-more-fade,
.m_info .show-more-fade {
  background-image: linear-gradient(to bottom, rgb(from var(--color-info-bg) r g b / 0), var(--color-info-bg));
}
.level-warn .show-more-fade,
.m_warn .show-more-fade {
  background-image: linear-gradient(to bottom, rgb(from var(--color-warn-bg) r g b / 0), var(--color-warn-bg));
}
[title]:hover .show-more-fade {
  background-image: linear-gradient(to bottom, rgb(from #c9c9c9 r g b / 0), #c9c9c9);
}
.show-more,
.show-less {
  display: table;
  box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  // border: 1px solid var(--color-button-border);
  // color: var(--color-button-fg);
  // background-color: var(--color-button-bg);
}

//
// notifications
//
@at-root {
  .debug-noti-wrap {
    position: fixed;
    display: none;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10049;
    .debug-noti {
      display: table-cell;
      text-align: center;
      vertical-align: bottom;
      font-size: 30px;
      transform-origin: 50% 100%;
      color: gray;
      mix-blend-mode: difference;
      &.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);
  }
}
