@import "../mixins";

.explore-page {
  /* theming */
  & .explore-header {
    background-color: var(--black);

    /* page title is always short, so move it up! */
    & .title-container {
      @media (min-width: 600px) {
        margin-top: -1rem;
      }
    }
  }

  /* layout */
  & .explore-category-list,
  & .tile-list {
    padding: 0 var(--gutter);
  }
  & .explore-title-container {
    padding: 2rem var(--gutter) 1rem var(--gutter);
  }
  & .tile-list {
    margin-bottom: 0;
  }
  /* set min-height for transitions */
  & .explore-container {
    min-height: 35vh; /* super fudged */
  }
}

/* category select list layout */
.explore-category-list {
  padding: 0 var(--gutter);
  width: auto;
  display: flex;
  justify-content: space-between; /* justify on tiny screens */
  text-align: center; /* fallback */

  /* center on non-tiny screens */
  @add-mixin from-xs {
    justify-content: center;

    /* layout fallback */
    & .explore-category-item {
      display: inline-block;

      /* space out adjacent items */
      &:not(:last-of-type) {
        margin-right: var(--gutter);
      }
    }
  }
}

/* category select link theming */
.explore-category-link {
  /* sizing */
  display: block;
  line-height: 2rem;
  min-width: 4rem; /* chile is shorter than the others */
  /* theming */
  border-bottom-width: 2px;
  border-bottom-style: solid;
  color: var(--white);
  /* override underline, on hover too */
  text-decoration: none !important;
  /* transitions */
  transition:
    opacity 0.2s ease-out,
    border-color 0.2s ease-out;

  /* side by side icon & text */
  & .explore-category-icon,
  & .explore-category-text {
    display: inline-block;
    vertical-align: middle;
  }
  /* icon */
  & .explore-category-icon {
    width: 2.5em;
    height: 2.5em;

    /* scale down on non-tiny screens */
    @add-mixin from-xs {
      width: 1.625em;
      height: 1.625em;
    }
  }
  /* text */
  & .explore-category-text {

    /* force line break on tiny screens */
    @add-mixin for-xs {
      display: block;
    }
    /* space out from icon on bigger screens */
    @add-mixin from-xs {
      margin-left: 0.5em;
    }
  }

  /* inactive state */
  &.is-inactive {
    border-bottom-color: transparent !important; /* override theme */
    opacity: 0.75;

    /* interactions */
    &:hover, &:focus {
      opacity: 1;
    }
  }
}

/* filter indicator title & reset button */
.explore-title-container {

  & .explore-title {
    color: var(--white);
  }

  /* reset link theming */
  & .explore-reset-link {
    display: block; /* full width by default */

    & .explore-reset-icon {
      /* sizing */
      font-size: 1.125em;
      /* transitions */
      transition: transform 0.2s ease-out;
    }
    & .explore-reset-text {
      /* positioning */
      margin-left: 0.25em;
      /* transitions */
      opacity: 0.875;
      transition: opacity 0.2s ease-out;
    }

    /* interactions */
    &:hover, &:focus {
      text-decoration: none;

      & .explore-reset-icon {
        transform: translateX(-2px);
      }
      & .explore-reset-text {
        opacity: 1;
      }
    }
  }


  /* title & reset link layout */
  @add-mixin from-sm {
    /* make space for reset link and center */
    & .explore-title {
      max-width: calc(100% - 16rem);
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }
    /* fudge into place */
    & .explore-reset-link {
      position: absolute;
      left: var(--gutter);
      top: 2.375rem;
    }
  }
}

/* Show/Hide panels */
.explore-panel {
  transition:
    opacity 0.2s ease-in 0.01s,
    transform 0.2s ease-in 0.01s;

  &.is-hidden {
    @add-mixin visually-hidden;
    transform: scale(1.01) translateY(-5px);
    opacity: 0;
    z-index: -1;
  }

  &:last-of-type.is-hidden {
    transform: scale(0.99) translateY(5px);
  }
}
