.wh-state {
  position: relative;

  &.half {
    color: var(--alert);
  }

  &.crit {
    color: var(--error);
  }

  &.lt4 {
    animation-name: eol;
    animation-duration: 0.75s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    z-index: 1;
  }

  &.lt1 {
    animation-name: eol;
    animation-duration: 0.25s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    z-index: 1;
  }

  &.s {
    color: var(--color6);

    svg {
      padding: 0.375rem;
    }
  }

  &::before {
    transition: opacity 0.3s ease;
    opacity: 0;
    display: block;
    position: absolute;
    z-index: 1;
    top: 0.1875rem;
    border-color: transparent currentColor transparent transparent;
    border-style: solid;
    backface-visibility: hidden;
  }

  &.s::before {
    content: " ";
    border-width: 0 0.5rem 0.5rem 0;
    left: 0rem;
  }

  &.m::before {
    content: " ";
    border-width: 0 0.75rem 0.75rem 0;
    left: -0.25rem;
  }

  &.l::before {
    content: " ";
    border-width: 0 1rem 1rem 0;
    left: -0.5rem;
  }

  &.xl::before {
    content: " ";
    border-width: 0 1.25rem 1.25rem 0;
    left: -0.75rem;
  }

  &.xxl::before {
    content: " ";
    border-width: 0 1.5rem 1.5rem 0;
    left: -1rem;
  }

  svg {
    transform-origin: 50%;
    transform: rotate(0);
    transition: transform 0.3s ease;
    position: relative;
    z-index: 3;
  }
}