lila/ui/lib/css/ceval/_ctrl.scss

.ceval {
  @extend %metal-bg;

  position: relative;
  display: flex;
  column-gap: 6px;
  align-items: stretch;
  padding-top: 3px; // bar

  &.enabled .show-threat {
    visibility: visible;
  }

  .cmn-toggle {
    @extend %flex-center;

    flex: 0 0 40px;
    margin-inline-start: 6px;
  }

  pearl {
    flex: 1 0 auto;
    line-height: 38px;
    font-size: 1.6em;
    text-align: center;
    font-weight: bold;
  }

  .is-red::before {
    vertical-align: -3px;
  }

  .engine {
    @extend %nowrap-hidden;

    flex: 2 1 auto;
    font-size: 12px;
    line-height: 16px;
    margin-top: 3px;
    color: $c-font-dim;
    user-select: none;
  }

  .engine {
    .cloud,
    .infinite {
      @extend %roboto, %box-radius;

      margin-inline-start: 4px;
      background: $c-secondary-dim;
      color: $c-over;
      padding: 1px 3px;
      text-transform: uppercase;
      font-size: 11px;
    }

    .info {
      display: block;
      white-space: nowrap;
    }

    .deeper {
      color: $c-primary;
      margin-inline-end: 4px;

      &::before {
        vertical-align: top;
      }
    }
  }

  .show-threat {
    flex: 0 0 18px;
    color: $c-font-dim;
    font-size: 16px;
    margin-top: -3px; // bar
    overflow: hidden;
    visibility: hidden;

    &:hover:not(.hidden),
    &.active {
      color: $c-bad;
    }

    &.hidden {
      opacity: 0.3;
      cursor: default;
    }
  }

  .settings-gear {
    color: $c-font-dim;
    font-size: 16px;
    padding: 0 6px;
    margin-inline-end: 6px;
    margin-top: -3px; // bar

    &:hover {
      color: $c-font;
    }

    &.active {
      color: white;
      background-color: $c-primary;
    }
  }

  .technology {
    margin-inline-start: 5px;

    &.good {
      color: $c-good;
    }
  }

  .bar {
    position: absolute;
    width: 100%;
    height: 3px;
    top: 0;
  }

  @keyframes bar-anim {
    from {
      background-position: 0 0;
    }

    to {
      background-position: 100000px 0;
    }
  }

  .bar span {
    display: block;
    height: 3px;
    width: 0;
    background: $c-good;
    transition: width 1s;

    &.threat {
      background: $c-bad;
    }
  }

  &.computing .bar span {
    background-image: url('../images/bar-highlight.png');
    animation: bar-anim 1000s linear infinite;
  }
}

.engine-error {
  @extend %flex-column;

  align-items: center;
  row-gap: 1em;
  padding: 3em;
  text-align: left;
  max-width: 60vw;

  @media (max-width: at-most($medium)) {
    max-width: 80vw;
  }

  @media (max-width: at-most($xx-small)) {
    max-width: unset;
    width: 96vw;
  }

  h2 {
    @extend %base-font;

    font-size: 1.3em;
  }

  li {
    margin: 0 2em;
    line-height: 1.5em;
    list-style: disc;
  }

  pre {
    width: 100%;
    border: 1px solid #888;
    box-shadow: inset 0 0 2px $c-font-dim;
    padding: 1em;
    margin-bottom: 1em;
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }
}