div:not(:hover) > .sheet-hide-until-needed,
div.sheet-health:not(:hover) .sheet-health__center .sheet-hexfield {
  > div,
  > input {
    opacity: 0;
  }

  input:hover,
  input:focus {
    opacity: 1;

    ~ div,
    ~ input {
      opacity: 1;
    }
  }
}

.sheet-hexfield {
  position: relative;
  white-space: nowrap;
  color: $c-text-light;
  height: 36px;
  width: 36px;
  transition: color .3s ease-in-out, opacity .3s ease-in-out;

  div,
  input {
    transition: color .3s ease-in-out, opacity .3s ease-in-out;
    transition-delay: .4s;
  }

  &-gray,
  &-gray input {
    color: $c-text-lightest;
  }

  // Nested Hexfields
  .sheet-hexfield .sheet-hexfield__label {
    color: $c-text-lightest;
  }

  &.sheet-stay-on-input {
    input:not(:placeholder-shown) {
      opacity: 1 !important;

      ~ :not(.sheet-exception) {
        color: $c-text-light;
        opacity: 1 !important;
      }
    }
  }

  &__label {
    position: absolute;
    top: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end; // Left
    font-size: 9px !important; // Override Roll20!
    font-weight: 500;
    line-height: 10px !important; // Override Roll20!
    text-transform: uppercase;
    height: 16px;
    transform: translateX(-100%); // Left

    span {
      max-width: 48px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &--right {
      left: 36px;
      justify-content: flex-start;
      transform: translateX(0);
    }

    &--bottom {
      top: 38px;
      left: 18px;
      align-items: flex-start;
      justify-content: center;
      transform: translateX(-50%);
    }

    &--up {
      top: -18px;
      left: 18px;
      align-items: flex-end;
      justify-content: center;
      transform: translateX(-50%);
    }
  }
}