@import "../pages/mixins";

.featured-datum-splash {
  margin-bottom: 1.5rem;
  /* center icons */
  text-align: center;
  /* subtly darken background */
  background-image: radial-gradient(
    closest-side,
    color(var(--dark-3) a(0.25)),
    transparent
  );

  /* adjust main value margin */
  & .featured-datum-value {
    line-height: 1;
  }

  /* icon container — also used by map */
  & .featured-datum-icon {
    height: 80px;
    margin-bottom: 1rem;
    display: flex;

    /* allow icons to be absolutely positioned */
    & .featured-datum-img-container {
      width: 3rem;
      /* centered within flex container */
      margin: auto;
      /* offet absolutely positioned image height (fudged) */
      top: -0.625rem;

      /* default image positioning */
      & .featured-datum-img {
        position: absolute;
        top: 0.75em;
        left: 0;
        /* hide all by default */
        opacity: 0;
        /* transitions */
        transform: scale(1.5);
        transition:
          opacity 0.2s ease-out,
          transform 0.2s ease-out;

        /* position dummy in front */
        &.dummy-featured-datum-img {
          opacity: 1;
          z-index: 1;
          /* adjust transition speed */
          transition:
            opacity 0.1s ease-out,
            transform 0.2s ease-out;
        }
      }
    }
  }

  /* position tags and hide by default */
  & .featured-datum-tags {
    margin-top: -1.675em;
    top: -0.5em;
    /* transitions */
    opacity: 0;
    transform: translateY(-150%);

    /* space out tags */
    & .tag {
      margin-bottom: 0.5em;
    }
  }

  /* interactions */
  &:hover {

    /* make decile icons fan out */
    & .featured-datum-img-container .featured-datum-img {
      opacity: 1;

      /* move dummy icon up and hide it */
      &.dummy-featured-datum-img {
        transform: translateY(-40%);
        opacity: 0;
      }
      /* position individual icons */
      &:nth-of-type(2) { transform: translateY(-40%) translateX(-150%); }
      &:nth-of-type(3) { transform: translateY(-40%) translateX(-75%); }
      &:nth-of-type(4) { transform: translateY(-40%); }
      &:nth-of-type(5) { transform: translateY(-40%) translateX(75%); }
      &:nth-of-type(6) { transform: translateY(-40%) translateX(150%); }
    }

    /* make tag list appear */
    & .featured-datum-tags {
      opacity: 1; /* initially 0 */
      transform: none; /* initially translateY(-100%) */
      /* transition in only, with opacity delay */
      transition:
        opacity 0.2s ease-out 0.05s,
        transform 0.2s ease-out;
    }
  }
}
