@import "../pages/mixins.css";

.tile {
  /* layout */
  flex: 1 1 auto;
  /* set height */
  padding-top: 12%; /* assumes 5 column layout */
  /* typography */
  text-align: center;
  /* prevent content from spilling out of container */
  overflow: hidden;
  /* theming */
  color: var(--white);
  border: 1px solid var(--white);
  /* transitions */
  transition: border 0.3s ease-out;

  /* overlay */
  &:after {
    /* sizing & positioning */
    @add-mixin absolute-expand;
    content: "";
    /* theming */
    background-color: rgba(26, 27, 44, 0.333);
    background-image: linear-gradient(
      rgba(26, 27, 44, 0.25),
      rgba(26, 27, 44, 0.5) 50%,
      rgba(26, 27, 44, 0.25) 100%
    );
    /* transitions */
    transition: opacity 0.2s;
  }

  /* profile title */
  & .tile-inner {
    /* sizing & positioning */
    @add-mixin absolute-expand;
    z-index: 1; /* position above gradient overlay */
    padding: 0.75rem;
    /* vertically center children */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* category overrides */
    & .category {
      /* typography override */
      font-size: 0.5rem;
      /* space out profile title & category */
      margin-top: 0.5em;
    }
  }

  /* position image */
  & .tile-img {
    /* sizing & positioning */
    @add-mixin absolute-expand;
    object-fit: cover;
    /* transitions */
    transition: transform 0.3s ease-out;
    will-change: filter, opacity, transform;
    /* fade in once loaded */
    animation: fade-in 0.666s;
  }

  /* filter */
  & .filter-button {
    /* positioning */
    position: absolute;
    top: 0.75em;
    right: 0.75em;
    z-index: 3;
    /* sizing */
    padding: 0.35em 0.7em 0.5em 0.7em;
    /* theming */
    background: var(--dark-3);
    border-radius: 5em;

    & .filter-button-icon {
      margin-right: -1px; /* offset label */
      transform: scale(1.25);
      transition: transform 0.2s ease-out;
    }

    & .filter-button-text {
      @add-mixin visually-hidden;
      display: inline-block;
      vertical-align: middle;
      position: relative !important;
      /* transitions */
      font-size: 0.001px;
      transition: font-size 0.1s ease-out;
    }

    /* reveal filter button label */
    &:hover, &:focus {
      text-decoration: none;
      max-width: none;

      & .filter-button-icon {
        color: var(--white);
        transform: none;
      }
      & .filter-button-text {
        @add-mixin reset-visually-hidden;
        font-size: inherit;
        padding-left: 0.25em;
      }
    }
  }

  /* interactions */
  &:hover,
  &:focus-within {
    color: var(--white);
    text-decoration: none;

    /* adjust bg overlay opacity */
    &:after { opacity: 0.8; }

    /* zoom in on image */
    & .tile-img { transform: scale(1.05); }

    /* make category tag fully visible */
    & .category { opacity: 0.875; }
  }
}

/* animations */
@keyframes fade-in {
  from {
    opacity: 0;
    filter: blur(0.5rem);
  } to {
    opacity: 1;
  }
}
