@use "../base" as *;
@use "../abstracts" as *;

.fivestar-rating-submit,
.vote-result {
  display: none !important;
}

.product-teaser {
  border: 1px solid $light-gray;
  min-height: 0;
  height: 100%;
  background-color: white;
  position: relative;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 18px 36px -28px rgba(0, 0, 0, 0.42);
  overflow: hidden;
  display: flex;
  flex-direction: column;

  @media (max-width: 767px) {
    min-height: 0;
  }
  &:hover {
    z-index: 1;
    position: relative;
    background-color: white;
  }

  &__image--button {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    cursor: pointer;
  }

  &:hover &__image--button {
    transition: 0.3s;
    opacity: 1;
  }
  &__image--main {
    height: 260px;
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    overflow: hidden;
    display: block;
    img {
      height: 260px;
      transition-property: all;
      transition-duration: 0.2s;
      transition-timing-function: ease-in-out;
      object-fit: contain;
      margin: 0 auto;
    }

    @media (max-width: 767px) {
      height: 220px;

      img {
        height: 220px;
      }
    }
  }

  .mobile-disabled {
    pointer-events: none;
    touch-action: none;
    @include breakpoint(medium) {
      pointer-events: all;
      touch-action: auto;
    }
  }

  &__image {
    height: 260px;
    position: relative;
    margin-bottom: 12px;
    padding: 14px 18px 0;

    @media (max-width: 767px) {
      height: 220px;
      margin-bottom: 10px;
    }

    &--label {
      top: 7px;
      left: 8px;
      position: absolute;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: row;
      gap: 4px;
      z-index: 1;

      &-new,
      &-bestseller,
      &-sell {
        padding: 4px 8px;
        border-radius: 2px;
        font-family: $font-primary;
        font-size: 0.75rem;
        line-height: 14px;
        letter-spacing: 0.02rem;
      }

      &-new {
        background: $light-gray;
        color: $dark-gray;
      }

      &-bestseller {
        background: $dark-gray;
        color: white;
      }

      &-sell {
        background: $brand-red;
        color: white;
        padding: 4px 9px;
      }
    }

    &--options {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 1;

      @media (max-width: 767px) {
        top: 8px;
        right: 8px;
      }

      .flag-commerce-product-favourites,
      .flag-commerce-product-v-favourites,
      .flag {
        display: grid;
        place-content: center;
        width: 44px;
        height: 44px;
        cursor: pointer;
        margin-bottom: 8px;
        border: 1px solid rgba(61, 63, 78, 0.15);
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.94);
        box-shadow: 0 10px 22px -18px rgba(0, 0, 0, 0.65);
        a {
          text-indent: -9999px;
          display: block;
          background-image: url(../../assets/icons/heart.svg);
          background-size: cover;
          width: 22px;
          height: 20px;
        }
        &.action-unflag {
          a {
            background-image: url(../../assets/icons/heart-plain.svg);
          }
        }
        .ajax-progress {
          display: none;
        }
      }

      .main-images__links--compare  {
        display: grid;
        place-content: center;
        width: 44px;
        height: 44px;
        max-width: none;
        border: 1px solid rgba(61, 63, 78, 0.15);
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.94);
        box-shadow: 0 10px 22px -18px rgba(0, 0, 0, 0.65);
      }
      .comparison__button {
        display: flex;
        width: 24px;
        cursor: pointer;
        text-indent: -9999px;
        -webkit-mask: url(../../assets/icons/balance.svg) center center
          no-repeat;
        background-color: $dark-gray;
        -webkit-mask-size: contain;
        border-radius: 50%;
        &.remove-link {
          width: 27px;
          height: 30px;
          -webkit-mask: url(../../assets/icons/balance-active.svg) center center
            no-repeat;
        }
        &.different-type,
        &.limit-reached {
          background-color: $gray;
        }
      }
    }

    .active {
      opacity: 1;

      path {
        fill: $brand-red;
      }
    }

    &--images {
      display: flex;
      flex-direction: row;
      margin-bottom: 15px;
      gap: 2px;
      overflow-x: auto;
      overflow-y: hidden;
      height: 50px;
      min-height: 50px;

      @include breakpoint(medium) {
        gap: 4px;
      }

      @include breakpoint(large){
        display: flex;
      }

      img {
        width: 64px;
        height: 40px;
        border-radius: 1px;
        border: 1px solid $light-gray;
      }
    }
  }

  &__info {
    width: 100%;
    padding: 0 16px;

    @media (max-width: 767px) {
      padding: 0 10px;
    }

    @include breakpoint(medium) {
      padding: 0 16px;
    }

    &--line-text {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      width: auto;
      max-width: 100%;
      margin-bottom: 10px;

      span {
        display: inline-flex;
        width: fit-content;
        max-width: 100%;
        padding: 5px 10px;
        border: 1px solid rgba(61, 63, 78, 0.12);
        border-radius: 6px;
        background: rgba(250, 252, 255, 0.9);
        font-family: $font-primary;
        font-weight: 500;
        font-size: 0.75rem;
        line-height: 0.875rem;
        letter-spacing: 0.015rem;
      }
    }

    &--title {
      display: -webkit-box;
      min-height: 3.25rem;
      overflow: hidden;
      font-weight: 700;
      font-size: 1.35rem;
      line-height: 1.625rem;
      font-family: $font-primary;
      margin-bottom: 8px;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;

      @media (max-width: 767px) {
        font-size: 1.25rem;
        line-height: 1.5rem;
        margin-bottom: 6px;
      }
    }

    &--subtitle {
      display: none;
    }

    &--rating {
      font-size: 0.8rem;
      margin-bottom: 6px;
      @include rates;
    }
  }

  &__details {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    height: auto;
    opacity: 1;
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    padding: 0 16px;
    margin-bottom: 16px;

    @media (max-width: 767px) {
      padding: 0 10px;
    }

    &--dimensions,
    &--diameter,
    &--weight {
      align-items: center;
      width: fit-content;
      min-height: 38px;
      padding: 7px 9px;
      border: 1px solid rgba(61, 63, 78, 0.12);
      border-radius: 6px;
      background-color: #fff;
      font-family: $font-primary;
      font-weight: 500;
      font-size: 0.875rem;
      line-height: 1.125rem;
      display: flex;
      flex-shrink: 0;
      gap: 6px;
      margin: 0;
      white-space: nowrap;

      &::before {
        content: "";
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        background-color: $dark-gray;
        -webkit-mask-position: center;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: contain;
      }
    }

    &--dimensions::before {
      -webkit-mask-image: url("../../assets/icons/product-dimensions.svg");
      mask-image: url("../../assets/icons/product-dimensions.svg");
    }

    &--diameter::before {
      -webkit-mask-image: url("../../assets/icons/product-diameter.svg");
      mask-image: url("../../assets/icons/product-diameter.svg");
    }

    &--weight::before {
      -webkit-mask-image: url("../../assets/icons/product-weight.svg");
      mask-image: url("../../assets/icons/product-weight.svg");
    }

    &--weight {
      display: flex;
      @include breakpoint(large){
        display: flex;
      }
    }

    &--title {
      display: none;
    }
  }

  &__wrapper {
    &--price {
      padding: 0 16px;
      margin-bottom: 12px;
      min-height: 0;
      font-family: $font-primary;
      font-style: normal;

      @media (max-width: 767px) {
        padding: 0 10px;
        min-height: 0;
      }

      &:is(:has(.price-last-30-days), :has(.promotion-countdown)) {
        min-height: 58px;
      }

      .price-main {
        display: flex;
        gap: 12px;
        align-items: center;
        align-content: center;
        flex-direction: row;
        justify-content: flex-start;

        .price-main-span {
          display: flex;
          gap: 1rem;
        }

        &__discount-price {
          text-align: center;
          color: $brand-red;
          font-size: 1.75rem;
          font-weight: 700;
          line-height: 2rem;
          margin-right: -2px;
          white-space: nowrap;

          @media (max-width: 767px) {
            font-size: 1.75rem;
            line-height: 2rem;
          }
        }

        &__price {
          text-align: center;
          color: $mid-gray;
          font-size: 1.25rem;
          font-weight: 400;
          line-height: 2.25rem;
          margin-right: -3px;

          @media (max-width: 767px) {
            font-size: 1rem;
            line-height: 1.5rem;
          }
        }

        &__price.discount {
          text-decoration: line-through;
        }

        &__tax-info {
          color: $mid-gray;
          font-size: 0.75rem;
          font-weight: 400;
          line-height: 0.875rem;
          letter-spacing: 0.015rem;
          top: 5px;
          position: relative;
        }

        &:not(:has(.price-main__discount-price)) {
          flex-wrap: wrap;

          .price-main__price {
            color: $mid-gray;
            font-size: 1.75rem;
            font-weight: 700;
            line-height: 2rem;

            @media (max-width: 767px) {
              font-size: 1.75rem;
              line-height: 2rem;
            }
          }

          .price-main__tax-info {
            flex-basis: 100%;
            top: 0;
          }
        }
      }

      .price-last-30-days {
        color: $mid-gray;
        font-size: 0.75rem;
        font-weight: 400;
        line-height: 0.875rem;
        letter-spacing: 0.015rem;

        span {
          margin-left: 5px;
          font-weight: 500;
        }
      }
    }
  }

  &__buttons {
    height: auto;
    opacity: 1;
    display: none;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 10px;
    padding: 0 16px 16px 16px;
    margin-top: auto;

    @at-root .ui-dialog & {
      display: grid;
    }

    > span,
    > form,
    > div:not(.product-teaser__buttons--details) {
      width: 100%;
      min-width: 0;
    }

    &--details {
      @include button(outline);
      padding: 0;
      width: 100%;
      height: 56px;
      border: 1px solid $brand-blue;
      background-color: transparent;
      border-radius: 4px;
      &:hover {
        background-color: $brand-blue;
        border: 1px solid $brand-blue;
        a {
          color: white;
        }
      }
      a {
        font-family: $font-primary;
        font-weight: 500;
        font-size: 0.875rem;
        line-height: 1rem;
        color: $dark-gray;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .gto-commerce-cart-add-to-cart-product-widget {
    .form-actions {
      display: flex;

      .cart-button-label {
        gap: 8px;
        &::before {
          content: "";
          display: inline-block;
          background-image: url("../../assets/icons/shopping-cart.svg");
          width: 20px;
          height: 20px;
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          margin: auto 0;
        }
        padding: 12px 16px;
        border-radius: 4px;
        background-color: $brand-blue;
        box-shadow: 0px 12px 24px -16px rgba(0, 0, 0, 0.32);
        color: #fff;
        text-align: center;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 500;
        line-height: 1.25rem;
        height: 54px;
        min-width: 83px;
        font-family: $font-primary;
        cursor: pointer;
        @include breakpoint(large) {
          font-size: 1rem;
        }

        &:focus-visible {
          outline: 2px solid rgba(255, 255, 255, 0.9);
          outline-offset: -4px;
        }

        &:hover {
          background-color: $brand-blue;
          color: #fff;
          border-color: transparent;

          &::before {
            filter: none;
          }
        }
      }

      input.form-submit {
        display: none;
      }
    }
  }

  .gto-commerce-cart-add-to-cart-product.view-mode-teaser {
    display: grid;
    grid-template-columns: 106px minmax(0, 1fr);
    gap: 0;
    width: 100%;
    max-width: none;
    height: 56px;
    padding: 0;
    overflow: hidden;
    border-radius: 6px;
    background: $brand-blue;
    box-shadow: 0 16px 28px -20px rgba(28, 120, 225, 0.75);

    @media (max-width: 420px) {
      grid-template-columns: 92px minmax(0, 1fr);
    }

    .field--name-quantity {
      order: 1;
      max-width: none;
      height: 56px;
      border: 0;
      border-right: 1px solid rgba(255, 255, 255, 0.26);
      border-radius: 0;
      background: transparent;

      &::after {
        display: none;
      }

      .form-item {
        display: grid;
        grid-template-columns: 24px 34px 24px;
        justify-content: center;
        width: 100%;
        height: 100%;

        .before,
        .after {
          display: flex !important;
          justify-content: center;
          align-items: center;
          width: 24px;
          height: 100%;

          &::before {
            width: 14px;
            height: 14px;
            margin: 0;
            background-color: #fff;
            background-image: none;
            -webkit-mask-position: center;
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-size: contain;
            mask-position: center;
            mask-repeat: no-repeat;
            mask-size: contain;
          }
        }

        .before::before {
          -webkit-mask-image: url("../../assets/icons/minus.svg");
          mask-image: url("../../assets/icons/minus.svg");
        }

        .after::before {
          -webkit-mask-image: url("../../assets/icons/plus.svg");
          mask-image: url("../../assets/icons/plus.svg");
        }

        .form-text {
          width: 34px !important;
          color: #fff;
          font-size: 1.125rem;
          font-weight: 600;
          text-align: center;
        }
      }
    }

    div {
      span.cart-quantity {
        display: flex;
      }
    }

    .form-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      order: 2;
      height: 56px;

      .add-to-cart-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-width: 0;
        width: 100%;
        height: 56px;
        border-radius: 0;
        background-color: $brand-blue;
        box-shadow: none;
        cursor: pointer;

        &::before {
          display: block;
          flex: 0 0 18px;
          width: 18px;
          height: 18px;
          filter: brightness(0) invert(1);
          margin: 0;
          transform: translateY(-1px);
        }
      }

      .cart-button-label {
        height: 56px;
        min-width: 0;
        padding: 0 12px;
        border: 0;
        border-radius: 0;
        background-color: $brand-blue;
        box-shadow: none;
        font-size: 0.95rem;
        font-weight: 700;
        white-space: nowrap;

        @media (max-width: 1199px) {
          gap: 4px;
          padding: 0 6px;
          font-size: 0.75rem;
        }

        &::before {
          filter: none;
          width: 18px;
          height: 18px;

          @media (max-width: 1199px) {
            flex-basis: 14px;
            width: 14px;
            height: 14px;
          }
        }

        &:hover {
          border: 0;
          background-color: $brand-blue;
          color: #fff;

          &::before {
            filter: none;
          }
        }
      }

      .button--add-to-cart,
      .add_to_cart_button {
        flex: 0 1 auto;
        width: auto;
        min-width: 0;
        color: #fff;
        font-size: 0.95rem;
        font-weight: 700;
        line-height: 1.1;
        text-align: left;
        white-space: nowrap;
      }
    }
  }
}