@use "@naomi-2025/ui-core/site-config";
@use "s360-scss-toolkit";

$_caret-arrow-size: 10px;

.view--content-awards {
  &.view--embed-by-project {
    --view--row--margin-top: 0px;

    .view__rows {
      display: grid;
      grid-template-columns: repeat(auto-fill, 50px);
      gap: site-config.spacer(0);
    }

    .view__award {
      position: relative;
      outline: none;
      font-size: s360-scss-toolkit.font-size-ms(-1);

      &:hover,
      &:focus-visible {
        &::after,
        .view__award-info {
          opacity: 1;
          visibility: visible;
        }
      }

      // Attach the "caret" arrow to the parent so it's always in the center
      // since the .view__award-info may shift left to right.
      &::after {
        content: "";
        position: absolute;
        top: calc(100% - #{ $_caret-arrow-size });
        left: 50%;
        transform: translateX(-50%);
        border-width: $_caret-arrow-size;
        border-style: solid;
        opacity: 0;
        visibility: hidden;
        transition: all 200ms ease-in-out;
        border-color: transparent transparent var(--highlight-color) transparent;
      }
    }

    .view__award-info {
      position: absolute;
      top: calc(100% + (#{ $_caret-arrow-size } - 1px));

      background-color: var(--bg-color);
      padding: 10px 15px;
      border-radius: 5px;
      border: 1px solid var(--highlight-color);
      opacity: 0;
      visibility: hidden;
      transition: all 200ms ease-in-out;
      z-index: 10;

      > * + * {
        margin-top: site-config.spacer(-5);
      }
    }

    .view__award-title {
      white-space: nowrap;
    }
  }
}
