.wf-wrapper {
  display: inline-block;
  position: relative;
  width: fit-content;
}

.wf-h-frame, .wf-v-frame {
  border-color: transparent;
  border-image: none;
  border-style: solid;
  border-width: 1px;
  display: inline-block;
  opacity: 0;
  position: absolute;
  pointer-events: none;
  transition: opacity 200ms ease-out;
}

.wf-wrapper:hover .wf-h-frame, .wf-wrapper:hover .wf-v-frame {
  opacity: 1.0;
}

.wf-h-frame {
  border-image: linear-gradient(90deg, transparent 0%, #8BABD0 25%, #8BABD0 75%, transparent 100%) 10;
  border-left-width: 0;
  border-right-width: 0;
  bottom: 0;
  left: -25vw;
  right: -25vw;
  top: 0;
}

.wf-v-frame {
  border-image: linear-gradient(0deg, transparent 0%, #8BABD0 25%, #8BABD0 75%, transparent 100%) 10;
  border-top-width: 0;
  border-bottom-width: 0;
  bottom: -25vh;
  left: 0;
  right: 0;
  top: -25vh;
}

.wf-hoverable::after {
  background-color: transparent;
  bottom: -18px;
  color: transparent;
  content: attr(data-dim);
  display: inline-block;
  font-family: 'Open Sans', sans-serif;
  font-size: 9px;
  font-weight: normal;
  left: 8px;
  padding: 2px 2px;
  position: absolute;
  pointer-events: none;
  text-transform: none;
  transition: color 200ms ease-out;
  z-index: 50;
}

.wf-wrapper:hover .wf-hoverable::after {
  color: #8BABD0;
  background-color: #FFF;
  box-shadow: 4px 4px 4px -2px #FFF;
}