.contrast-preview {
  border: 1px solid var(--figma-color-border);
  overflow: hidden;
  user-select: none;
}

.contrast-preview-content {
  display: flex;
  position: relative;

  & img {
    height: auto;
    width: 100%;
  }
}

.text-node-hotspot {
  cursor: pointer;
  display: flex;
  position: absolute;

  & span {
    border-radius: 4px;
    color: #fff;
    display: none;
    font-family: sans-serif;
    font-size: 10px;
    font-weight: bold;
    line-height: 16px;
    padding: 0 4px;
    pointer-events: none;
    position: absolute;
    white-space: nowrap;
    z-index: 10;
  }

  &:hover {
    outline: 1px solid transparent;

    & span {
      display: block;
    }
  }

  &:focus-visible {
    outline: 1px solid transparent;

    &.status-fail {
      outline-color: var(--border-attention);
    }

    &.status-mixed,
    &.status-unknown {
      outline-color: var(--border-warning);
    }

    &.status-pass {
      outline-color: var(--figma-color-bg-success);
    }

    & span {
      display: block;
    }
  }

  &.status-fail span {
    align-items: center;
    background-color: var(--background-attention);
    color: var(--foreground-on-color);
    display: flex;

    svg {
      margin-right: 4px;
    }
  }

  &.status-mixed span,
  &.status-unknown span {
    background-color: var(--background-warning);
    color: var(--foreground-on-warning);
  }

  &.status-pass span {
    background-color: var(--figma-color-bg-success);
    color: var(--figma-color-text-onsuccess);
  }
}

.text-node-hotspot-bg {
  height: 100%;
  opacity: 0.6;
  position: absolute;
  width: 100%;
  z-index: 5;

  .status-fail & {
    background-color: var(--background-attention);
  }

  .status-mixed &,
  .status-unknown & {
    background-color: var(--background-warning);
  }

  .status-pass & {
    background-color: var(--figma-color-bg-success);
  }
}