src/style/style.scss

@use 'variable' as *;
@use 'mixin' as *;
@use 'luna' as *;

.container {
  min-width: 320px;
  pointer-events: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999;
  color: var(--foreground);
  font-family: $font-family;
  font-size: $font-size;
  direction: ltr;
  &.dark {
    color-scheme: dark;
  }
  * {
    box-sizing: border-box;
    pointer-events: all;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: none;
  }
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  h1,
  h2,
  h3,
  h4 {
    margin: 0;
  }
  h2 {
    font-size: $font-size;
    [class^='icon-'],
    [class*=' icon-'] {
      font-weight: normal;
    }
  }
  &.inline {
    position: static;
  }
}

.hidden {
  display: none;
}

.icon-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default !important;
  &:active {
    color: inherit !important;
  }
}

.tag-name-color {
  color: var(--tag-name-color);
}

.function-color {
  color: var(--function-color);
}

.attribute-name-color {
  color: var(--attribute-name-color);
}

.operator-color {
  color: var(--operator-color);
}

.string-color {
  color: var(--string-color);
}