@import 'moda-themes/themes';
@import '01-variables/01-variables-breakpoints.scss';
@import '01-variables/04-variables-grid-layout.scss';
@import '01-variables/05-variables-transitions.scss';
@import '02-ocl/01-ocl-font-styles.scss';
@import 'fontcustom/fontcustom.scss';

.grid-cell {
  padding: $gutter-medium;
  vertical-align: top;

  * {
    box-sizing: border-box;
  }

  .grid-cell-content {
    position: relative;
  }

  &.variant-cell.hover {
    .grid-cell-content {
      box-shadow: 0 7px 11px 0 rgba(black, 0.1);

      @include range-mobile {
        border: 1px solid transparent;
      }

      .grid-cell-image-container {
        .promo-label {
          background-color: rgba(0, 0, 0, 0.3);
        }
      }
    }

    .product-details-wrapper {
      .product-details {
        .quickshop-wrapper {
          visibility: visible;
        }

        .description {
          visibility: hidden;
        }
      }
    }
  }
}

.grid-cell.variant-cell {
  position: relative;
  text-align: center;

  .mo-display-icon-heart {
    vertical-align: middle;
    position: absolute;
    font-size: 15px;
    z-index: 2;
    right: 0px;
    top: 0px;
    width: 48px;
    height: 48px;
    padding: 16px;
    color: color('nokia');
    cursor: pointer;
    @include icon(before, icon-heart_filled);

    &.-non-touch {
      &:hover {
        color: color('black');
      }
    }

    &.-unfavorited {
      @include icon(after, icon-heart);
    }

    &.-favorited {
      @include icon(after, icon-heart_filled);
    }

    &:before {
      color: rgba(black, 0);
      margin-right: -15px;
      -webkit-text-stroke: white 1px;
    }
  }

  .unlike-confirmation-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    background-color: rgba(white, 0.9);
    border: 1px solid color('elephant');
    padding-top: 50%;

    > span {
      display: inline-block;
      width: 75%;
      margin: 0 auto;
      font-family: font-family('sans');
      font-size: 12px;
    }

    .mo-display-button {
      width: 75%;
      margin: 20px auto;
    }
  }

  .product-details-wrapper {
    position: relative;

    .product-availability {
      color: color('burnt-orange');
      text-transform: capitalize;
      height: 18px;
      padding: 3px 10px 0;
      overflow: visible;
    }

    .product-details {
      position: relative;
      z-index: 2;

      .product-details-spacer {
        height: 1px;
      }

      .quickshop-wrapper {
        visibility: hidden;
        position: relative;

        @include range-mobile {
          display: none;
        }

        .size-slider {
          margin: 7px 20px;
        }

        .carousel {
          margin: 4px 0px;
        }

        .product-price {
          margin: 0px 0px 4px;
        }

        .variant-color-picker {
          margin: 13px 0 12px;
        }
      }

      .description {
        position: absolute;
        top: 7px;
        left: 0;
        right: 0;

        @include range-mobile {
          position: relative;
          top: 0;
          margin-top: 7px;
        }

        .product-name {
          color: color('black');
        }

        .variant-tag {
          border: 1px solid color('nokia');
          display: inline-block;
          width: auto;
          margin-top: 4px;
          padding: 3px 10px;
          color: color('nokia');
          text-transform: uppercase;
        }
      }
    }
  }

  .grid-cell-image-container {
    position: relative;
    padding-bottom: 160%;
    overflow: hidden;

    .promo-label {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 17px;
      padding: 2px 0;
      line-height: 13px;
      font-size: font-size('sm');
      letter-spacing: letter-spacing('lg');
      color: color('white');
      text-align: center;
      text-transform: uppercase;
      z-index: 1;

      &--forest-green {
        background-color: color('forest-green');
      }

      &--brick {
        background-color: color('brick');
      }
    }

    .image-rotate {
      position: absolute;
      display: block;
      top: 0px;
      left: 0px;
      width: 100%;
      opacity: 0;
      transition: opacity $image-transition-opacity ease;

      &[data-image-active='true'] {
        opacity: 1;
      }
    }
  }
}

// TODO: Redo these classes to use BEM...
.grid-cell.variant-cell {
  .designer-name {
    font-family: font-family('sans');
    font-weight: bold;
    font-size: 12px;
    line-height: 1.66;
    color: color('black');
    text-transform: uppercase;
    letter-spacing: letter-spacing('wide');
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}