.HovercardContent {
  animation: scaleIn $duration-zoom ease-out;
  transform-origin: var(--radix-hover-card-content-transform-origin);
  background: var(--dialog-bg);
  border-radius: $card-corner;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  gap: $unit-2x;
  max-height: 30vh;
  overflow-y: scroll;
  padding: $unit-2x;
  width: 300px;

  .top {
    display: flex;
    flex-direction: column;
    gap: calc($unit / 2);

    .title {
      align-items: center;
      display: flex;
      flex-direction: row;
      gap: $unit * 2;

      h4 {
        flex-grow: 1;
        font-size: $font-medium;
        line-height: 1.2;
        min-width: 140px;
      }

      img {
        height: auto;
        width: 100px;
      }
    }

    .subInfo {
      align-items: center;
      display: flex;
      flex-direction: row;
      gap: $unit * 2;

      .icons {
        display: flex;
        flex-direction: row;
        flex-grow: 1;
        gap: $unit;
      }

      .UncapIndicator {
        min-width: 100px;
      }
    }
  }

  section {
    h5 {
      font-size: $font-small;
      font-weight: $medium;
      opacity: 0.7;

      &.wind {
        color: $wind-bg-20;
      }

      &.fire {
        color: $fire-bg-20;
      }

      &.water {
        color: $water-bg-20;
      }

      &.earth {
        color: $earth-bg-20;
      }

      &.dark {
        color: $dark-bg-10;
      }

      &.light {
        color: $light-bg-20;
      }
    }
  }

  a.Button {
    display: block;
    padding: $unit * 1.5;
    text-align: center;
  }
}