/*=========================
=        Portfolio        =
==========================*/
.m-neuron-portfolio {
  position: relative;

  &__link {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  &__thumbnail {
    &--link {
      margin-bottom: 0 !important;

      &:hover {
        .m-neuron-portfolio__overlay {
          opacity: 1;
          visibility: visible;
        }
      }
    }
  }

  // Image Animations
  &:hover {
    .m-neuron-post__thumbnail--zoom-in {
      img {
        transform: scale(1.1);
      }
    }

    .m-neuron-post__thumbnail--zoom-out {
      img {
        clip-path: inset(22px);
      }
    }

    .m-neuron-post__thumbnail--tilt-right {
      img {
        object-position: 45% 50%;
      }
    }
  }

  &__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: auto;
    height: auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background-color: rgba(51, 51, 51, 0.8);

    transition: all $authenticMotion 300ms;

    opacity: 0;
    visibility: hidden;
    text-align: center;
  }

  &__title {
    margin-bottom: 0;
    color: #fff;
    width: 100%;
  }

  &__category {
    color: #fff;
    width: 100%;
  }

  &__price {
    color: #fff;
  }

  &__add-to-cart {
    position: relative;
    z-index: 2;
    color: #fff;

    a {
      display: flex;
      align-items: center;
      justify-content: center;
      color: inherit;
    }
  }

  &__sale-flash {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 45px;
    height: 45px;
    border-radius: 50%;

    position: absolute;
    right: 20px;
    top: 0;
    margin-top: -20px;

    font-size: rem(14px);
    background-color: #000;
    color: #fff;
  }

  // Tooltip Caption
  &--hover-tooltip {
    &#tooltip-caption {
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      position: fixed;
      z-index: 999;
      width: -webkit-fit-content;
      width: -moz-fit-content;
      width: fit-content;
      height: auto;

      &.active {
        opacity: 1;
        visibility: visible;
      }

      .m-neuron-portfolio--hover-tooltip {
        &__inner {
          display: inline-block;
          position: relative;
          margin-top: 2.5rem;
        }

        &__title,
        &__subtitle {
          width: max-content;

          opacity: 1;
          color: #000;
          background-color: #fff;
        }

        &__title {
          display: inline-block;
          padding: 8px 25px;
          position: relative;
          z-index: 8;
          margin: 0;
        }

        &__subtitle {
          padding: 2px 10px 1px;
          position: absolute;
          margin-top: -22px;
          z-index: 9;
          font-style: italic;
          border: 1px solid #fff;
        }
      }
    }
  }

  // Fixed Caption
  &--hover-fixed {
    &#fixed-caption {
      pointer-events: none;
      @include fixed-element;
      z-index: 999;

      article {
        @include absolute-element;
        display: flex;
        align-items: center;
        justify-content: center;

        .m-neuron-portfolio--hover-fixed {
          &__inner {
            text-align: center;
            opacity: 0;
            visibility: hidden;
            transform: translateY(35px);
            transition: all $easeOutSine 200ms;
          }

          &__title {
            color: $extra-dark;
            z-index: 8;
            opacity: 1;

            margin-bottom: 4px;
          }

          &__subtitle {
            z-index: 9;
            color: $dark;
            font-style: italic;
            opacity: 1;
          }
        }
      }

      article {
        &.active {
          .m-neuron-portfolio--hover-fixed__inner {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
          }
        }
      }
    }
  }
}

.elementor-widget-neuron-portfolio {
  &.m-neuron-portfolio {
    // Tooltip
    &--hover-tooltip {
      .m-neuron-portfolio {
        &__overlay {
          display: none;
        }
      }
    }

    // Fixed
    &--hover-fixed {
      .m-neuron-portfolio {
        &__overlay {
          display: none;
        }

        &__thumbnail--link {
          transition: opacity $easeOutSine 400ms;
          transition-delay: 0.05s;
        }
      }
      &.active article .m-neuron-portfolio__thumbnail--link:not(:hover) {
        opacity: 0.25;
      }
    }

    // Translate Animation
    &--hover-translate {
      .m-neuron-portfolio {
        &__title,
        &__category,
        &__price,
        &__add-to-cart {
          transform: translateY(20px);
          transition-duration: 0.3s;
          opacity: 0;
        }

        &__thumbnail--link {
          &:hover {
            .m-neuron-portfolio {
              &__title,
              &__category,
              &__price,
              &__add-to-cart {
                transform: none;
                opacity: 1;
              }
            }
          }
        }
      }

      // Reverse
      &.m-neuron-portfolio__overlay--reverse {
        .m-neuron-portfolio__thumbnail--link:hover {
          .m-neuron-portfolio {
            &__title,
            &__category,
            &__price,
            &__add-to-cart {
              transform: translateY(20px);
              transition-duration: 0.3s;
              opacity: 0;
            }
          }
        }
      }
    }

    // Scale Animation
    &--hover-scale {
      .m-neuron-portfolio {
        &__title,
        &__category,
        &__price,
        &__add-to-cart {
          transform: scale(0.9);
          transition: $easeOutQuad 0.3s;
          opacity: 0;
        }

        &__thumbnail--link {
          &:hover {
            .m-neuron-portfolio {
              &__title,
              &__category,
              &__price,
              &__add-to-cart {
                transform: none;
                opacity: 1;
              }
            }
          }
        }
      }

      // Reverse
      &.m-neuron-portfolio__overlay--reverse {
        .m-neuron-portfolio__thumbnail--link:hover {
          .m-neuron-portfolio {
            &__title,
            &__category,
            &__price,
            &__add-to-cart {
              transform: scale(0.9);
              transition: $easeOutQuad 0.3s;
              opacity: 0;
            }
          }
        }
      }
    }
  }

  &.m-neuron-portfolio__overlay {
    // Overlay None -- Background Type
    &--none {
      .m-neuron-portfolio__overlay {
        display: none;
      }
    }

    // Active Overlay
    &--active {
      .m-neuron-portfolio {
        &__title,
        &__category,
        &__price,
        &__add-to-cart {
          transform: none;
          opacity: 1;
        }

        &__overlay {
          opacity: 1;
          visibility: visible;
        }
      }
    }

    // Reverse Active Overlay
    &--reverse {
      .m-neuron-portfolio__thumbnail--link {
        &:hover {
          .m-neuron-portfolio__overlay {
            opacity: 0;
            visibility: hidden;
          }
        }
      }
    }
  }

  // Add to Cart Position
  &.m-neuron-portfolio__add-to-cart {
    // Horizontal Position
    &--h-left {
      .m-neuron-portfolio__add-to-cart {
        display: flex;
        margin-right: auto;
        left: 0;
      }
    }

    &--h-right {
      .m-neuron-portfolio__add-to-cart {
        display: flex;
        margin-left: auto;
        right: 0;
      }
    }

    &--h-justified {
      .m-neuron-portfolio__add-to-cart {
        width: 100%;
      }
    }

    // Vertical Position
    &--v-top {
      .m-neuron-portfolio__add-to-cart {
        position: absolute;
        top: 0;
      }
    }

    &--v-center {
      .m-neuron-portfolio__add-to-cart {
        position: absolute;
      }
    }

    &--v-bottom {
      .m-neuron-portfolio__add-to-cart {
        position: absolute;
        bottom: 0;
      }
    }
  }
}
