@import "../pages/mixins";

.topics-container {
  /* padding-top: 3rem; space out from splash */
  background-color: var(--black);

  /* de-emphasize text slightly */
  & p,
  & li {
    color: var(--light-1);
  }
}


/* layout for topic-heading and topic-tabs */
.topic-header {
  /* side by side layout on bigger screens */
  @add-mixin from-md {
    /* layout */
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    /* positioning */
    padding-left: calc(22px + 0.75rem); /* line up with logo */

    & .topic-heading {
      padding-right: 2rem;
      top: -0.15rem; /* align with tab baseline */
    }
  }
}


/* panel/slide body style */
.topic-slide-container {
  /* theming */
  background-color: var(--dark-3);
  border-radius: 2px 0 2px 2px;
  /* sizing */
  padding: 2.25rem calc(22px + 0.75rem); /* line up with logo */

  /* less white space on smaller screens */
  @add-mixin for-md {
    /* extend background, reduce padding */
    padding: 1rem;
    margin-left: -1rem;
    margin-right: -1rem;
    /* remove border */
    border-top-left-radius: 0;
  }

  /* account for slides with no subtabs */
  & .topic-slider:first-child {
    @add-mixin from-md {
      margin-top: 0.75rem;
    }
  }

  /* default / hidden state */
  & .slick-slide:not(.slick-active) {
    /* prevent click & hover events */
    visibility: hidden;
    pointer-events: none;
    z-index: -1;
    /* transitions */
    opacity: 0;
    transform: translateY(10px);
  }

  /* active state; transition in */
  & .slick-slide.slick-active {
    transition:
      opacity 0.2s ease-in,
      transform 0.2s ease-in;
  }
}


/* container for topic title, nav, and slider */
.topic-block {
  background-color: var(--black);
  color: var(--white);
  padding:
    88px
    var(--gutter)
    0
    var(--gutter);

  /* offset scroll position when using topic anchor links */
  & .topic-anchor-link {
    bottom: 40px;
  }
}


/* non-slider, adjacent section blocks */
.linear-topic-slides .topic-slide + .topic-slide {
  padding-top: 2.5rem;
  margin-top: 2.25rem;
  border-top: 2px solid var(--black);
}

/* inside the slide */
.topic-slide-block {

  /* side by side layout */
  @add-mixin from-md {
    display: flex;
    justify-content: space-between;

    /* text content */
    & .topic-slide-intro {
      @add-mixin font-xs;
      width: 25%;

      /* charts right */
      & + .topic-slide-charts {
        width: calc(75% - 3rem);
      }

      /* no siblings; use even 2 column layout */
      /* i.e., products profile intro section */
      &:first-child:last-child {
        width: 100%;

        /* side by side layout */
        @add-mixin from-sm {
          display: flex;

          /* NOTE: exactly two children are expected */
          & > * {
            flex: 1 0 50%;
            flex: 1 0 calc(50% - 1rem);

            /* space out adjacent columns */
            & + * {
              margin-left: 2rem;
            }
          }
        }

        /* size up text */
        & .topic-slide-text {
          @add-mixin font-sm;
        }
      }
    }
  }

  /* adjust topic slide text when the topic slide title is hidden */
  & .topic-slide-title.u-visually-hidden + .topic-slide-text {
    margin-top: 0.375rem;
  }


  /* space out featured data from other text content */
  & .topic-slide-data {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }


  /* line up featured data on smaller screens */
  @media (min-width: 400px) and (max-width: 991px) {
    & .topic-slide-data {
      display: flex;
      justify-content: space-between;

      & .featured-datum {
        flex-direction: column;
        text-align: center;
        width: 100%;

        /* two items */
        &:first-child:nth-last-child(2),
        &:first-child:nth-last-child(2) ~ .featured-datum {
          width: 45%;
        }

        /* three items */
        &:first-child:nth-last-child(3),
        &:first-child:nth-last-child(3) ~ .featured-datum {
          width: 33%;
        }

        & .featured-datum-icon {
          max-width: 3rem;
          margin-left: auto;
          margin-right: auto;
        }

        & .featured-datum-data {
          @add-mixin font-xl;
          display: block;
          margin-right: 0;
        }
      }
    }
  }

  /* context info (i.e., SNED) */
  & .topic-slide-context-subhead {
    margin-top: 1.5rem;
  }
}

/* visualizations */
.topic-slide-charts {

  /* centered icons */
  &.centered-topic-slide-charts {
    text-align: center;
    max-width: calc(50rem);
    margin-left: auto;
    margin-right: auto;

    /* offset margin between intro & viz columns on medium screens */
    @media (min-width: 992px) and (max-width: 1599px) {
      left: 2.25rem;
    }

    & .chart-title {
      display: inline-block;
    }
  }

  /* position chart title and export controls */
  & .chart-title {
    @add-mixin font-sm;
    line-height: 1.125;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    /* align with title */
    margin-top: 0.325rem;
    /* override blueprint */
    margin-bottom: 0.5rem;

    /* let the actual title flex as much as needed */
    & > span {
      flex: 1 1 auto;
    }

    /* prevent flexbox from shrinking the button */
    & .export-controls {
      flex: 1 0 auto;
    }
  }

  /* space out button group & option group from visualization */
  & * + .btn-group,
  & * + .option-group {
    margin-top: 1rem;
  }

  /* canon overrides 😡 */
  & .section {
    padding: 0 0 0.5rem 0; /* keep button groups from getting cut off */
  }
  & .viz {
    margin: 0; /* canon override */
    min-height: 400px;
  }
}

/* prevent mouseover event for hacky legends */
.prevent-legend-hover .d3plus-Legend .d3plus-HitArea {
  display: none !important;
}
