$inuit-namespace: '';

/**
 * px-tile styles
 */
.px-tile {
  // Generic
  //@import "px-normalize-design/_generic.normalize.scss";
  //@import "px-box-sizing-design/_generic.box-sizing.scss";
  @import "px-helpers-design/_generic.helpers.scss";
  // Base
  //@import "px-headings-design/_base.headings.scss";
  // Meta
  // Objects
  //@import "px-shadows-design/_objects.shadows.scss";
  width: var(--px-tile-width,20rem);
  max-height: var(--px-tile-height,20rem);
  overflow: hidden;
  
  // Component
  .tile__container {
    position: relative;
    //height: var(--px-tile-height,20rem);
    width: var(--px-tile-width,20rem);
    max-width: var(--px-tile-width,20rem);
    max-height: var(--px-tile-height,20rem);
    overflow: hidden;
  }

  .overlay,
  .tile {
  //  width: var(--px-tile-width,20rem);
    max-width: var(--px-tile-width,20rem);
    //height: var(--px-tile-height,20rem);
    max-height: var(--px-tile-height,20rem);
  }

  .title-span {
    line-height: calculateRem(22px);
  }

  .thumbnail {
    width           : var(--px-tile-thumbnail-width, 100%);
    height          : var(--px-tile-thumbnail-height, 11.66667rem);
    background-color: var(--px-tile-thumbnail-background-color, white);
  }
  .header-wrapper {
    margin-top: 1.6rem;
    transition: margin-top .2s cubic-bezier(.78,.13,.16,.87) .1s;
    background-color: var(--px-tile-background-color, lightgray);
  }
  .title {
    background: 0 0;
    margin-top: .6rem;
    width: 100%;
    padding: 0 1.3333rem;
  }
  .overlay-top-content {
    overflow: hidden;
}

  .overlay {
    position        : absolute;
    top             : 0;
    background-color: var(--px-tile-overlay-background-color, black);
    color           : var(--px-tile-overlay-text-color, white);
    opacity         : 0;
    transition      : opacity 0.4s cubic-bezier(.78,.13,.16,.87);
    display         : flex;
    flex-direction  : column;
    justify-content : space-between;

    .title {
      background: none;
      margin-top: 1rem;
    }

    .text {
      padding   : 0 1.3333rem;
      height    : 7.6rem;
      overflow  : hidden;
      margin-top: 1rem;
    }

    .footer {
      padding   : 1rem 1.3333rem;
      height    : 3.66667rem;
      margin-top: 1rem;
    }

    .footer,
    .text,
    .title {
      transition: margin-top 0.2s cubic-bezier(0.78, 0.13, 0.16, 0.87) 0.1s;
    }
  }

  .tile__container:hover {
    .overlay {
      opacity: 1;

      .footer,
      .text,
      .title {
        margin-top: 0;
      }
    }
  }
}