/*
 * Asset Share Commons
 *
 * Copyright [2017]  Adobe
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import (once) "/apps/asset-share-commons/clientlibs/clientlib-site/less/variables.less";

.cmp-search-results {

  @keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
  }
  /* Firefox < 16 */
  @-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Safari, Chrome and Opera > 12.1 */
  @-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Internet Explorer */
  @-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Opera < 12.1 */
  @-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .cmp-cards--horizontal-masonry {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .cmp-card.cmp-card--horizontal-masonry {
    height: 210px;
    min-width: 125px;
    position: relative;
    padding: 10px;
    box-sizing: content-box;

    .cmp-card__type {
      position: absolute;
      display: none;
      top: 20px;
      right: 20px;
      background-color: rgba(0, 0, 0, .65);
      color: white;
      font-size: .75rem;
      padding: .5rem 1rem;
      border-radius: 3px;
    }

    .cmp-card__image {
      margin: 0 auto;
      height: 210px;
      display: block;
    }

    &:hover {
      .cmp-card__type,
      .cmp-card__overlay {
        display: block;

        -webkit-animation: fadein .5s; /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: fadein .5s; /* Firefox < 16 */
        -ms-animation: fadein .5s; /* Internet Explorer */
        -o-animation: fadein .5s; /* Opera < 12.1 */
        animation: fadein .5s;
      }
    }

    .cmp-card__overlay {
      display: none;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 10px;
      margin: 10px;
      background-color: rgba(0, 0, 0, .65);
      color: white;
      text-align: center;
      min-height: 60px;
    }

    .cmp-card__asset-title {
      border-bottom: 1px solid rgba(255, 255, 255, .25);
      margin-bottom: 1rem;
      padding-bottom: 1rem;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .cmp-card__actions {
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      list-style: none;
      display: flex;
      margin: 0 0 .5rem 0;
      padding: 0;
    }

    .cmp-card__action-item {
      display: inline;
    }

    .cmp-card__action-button {
      border: 0;
      background: none;
      color: white;
      font-size: .85rem;
      font-weight: bold;
      text-transform: uppercase;

      &:hover {
        cursor: pointer;
        text-decoration: underline;
      }
    }
  }
}