@tile-category--height: 150px;
@tile-category--overlay--z-index: 1;

beyer-tile-category {
  .tile-category {
    position: relative;
    height: @tile-category--height;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;

    .overlay {
      background-color: @champagne;
      opacity: 1;
      .easeInOutSine(opacity, @tile-animation-duration);
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      z-index: 1;
    }
    
    .text {
      padding-left: 20px;
      z-index: 2;
      .easeInOutSine(transform, @tile-animation-duration);

      h4 {
        margin-bottom: 12px;
        // transition: opacity @tile-animation-duration ease-in-out,
        //             max-height @tile-animation-duration ease-in-out;
        .easeInOutSine(all, @tile-animation-duration);
        opacity: 1;
        //max-height: 100px;
      }

      hr {
        margin-top: 0;
        margin-bottom: 6px;
      }

      p {
        //line-height: 1.1em;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        // transition: opacity @tile-animation-duration ease-in-out,
        //             max-height @tile-animation-duration ease-in-out;
        .easeInOutSine(all, @tile-animation-duration);
      }
    }

    .icon {
      z-index: 2;
      color: @white;
      font-size: 36px;

      svg {
        fill: @white;
        width: 40px;
        height: 40px;
      }
    }

    
  }

  &:hover,
  &.active {
    .tile-category {
      .text {
        transform: translate(0, -25px);

        h4 {
          //max-height: 0;
          opacity: 0;
        }

        p {
          max-height: 100px;
          opacity: 1;
        }
      }
      .overlay {
        opacity: .7;
      }
    }
  }
}
