@use "../../ui/vars" as *;

.observatory {
  .tooltip-popup table {
    border: 0;
    border-collapse: collapse;
    white-space: nowrap;
    width: 10rem;

    tr {
      color: var(--observatory-inverse-color-secondary);
      font-size: 0.875rem;

      &.current {
        color: var(--observatory-inverse-color);
      }
    }

    th,
    td {
      background-color: unset;
      border: 0;
      font-weight: var(--font-body);
      text-align: left;
      width: 50%;
    }

    th {
      font-size: 1rem;
      padding: 0 0 0.75rem;
    }

    td {
      padding: 0;

      svg {
        vertical-align: -0.3rem;
      }
    }
  }

  .info-tooltip {
    position: relative;

    .arrow {
      fill: var(--button-primary-default);
      margin-left: -20px;
      margin-top: -2rem;
      padding: 0;
      position: absolute;
    }

    .tooltip-popup {
      --tooltip-offset: 0;
      background-color: var(--button-primary-default);
      border-radius: var(--border-radius);
      color: var(--observatory-inverse-color-secondary);
      left: 50%;
      margin-top: 2rem;
      max-width: min(100vw, 20rem);
      padding: 1.5rem;
      position: absolute;
      text-align: center;
      top: 100%;
      transform: translateX(var(--tooltip-offset));
      visibility: hidden;
      width: max-content;
      z-index: 1;
    }

    &:hover,
    &:focus {
      .tooltip-popup {
        visibility: visible;
      }
    }
  }
}