@use '@vizality' as vz;

.monaco-editor {
  .monaco-hover {
    background-color: vz.color('black') !important;
    box-shadow: var(--elevation-high);
    color: var(--interactive-hover) !important;
    padding: 0 12px;
    border: none !important;
    font-family: 'Whitney' !important;
    border-radius: 4px;
    animation: editor-tooltip .1s ease forwards;
    a {
      color: var(--text-link) !important;
      pointer-events: none;
      &::after {
        content: '- ' attr(data-href);
        color: vz.color('white', .6);
        margin-left: 10px;
        display: inline-block;
      }
    }
    .hover-contents {
      padding: 10px 0;
    }
    .hover-row {
      // 'Peek Problem - No quick fixes available'
      &.status-bar {
        display: none;
      }
      &:not(:first-child):not(:empty) {
        border-top: 1px solid vz.color('white', .1) !important;
      }
    }
    * {
      font-family: 'Whitney' !important;
    }
  }
  // They don't work inside Discord anyway
  // a {
  //   display: none;
  // }
}

.monaco-hover-content {
  max-height: 400px !important;
}

@keyframes editor-tooltip {
  0% {
    opacity: 0;
    transform: scale(.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
