.why-not-add-card-wrapper {
  padding: 12px;
  border: 1px solid $gray;
  border-radius: 4px;
  background-color: $white;
  position: relative;
}

.why-not-add-card {
  display: flex;
  gap: 8px;

  &__image {
    display: block;
    width: 68px;
    height: 68px;
    object-fit: cover;
  }

  &__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  &__title {
    @include font-size(14);
    @include line-height(22);

    display: -webkit-box;
    overflow: hidden;
    color: $blue;
    font-weight: 500;
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    &:hover {
      color: $blue-darker;
      text-decoration: underline;
    }
  }

  &__bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  &__price-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    min-width: 0;
    padding-right: 8px;
    gap: 4px;
  }

  &__price {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 5px;
  }

  &__was-price {
    @include font-size(14);
    @include line-height(15);

    color: $warm-grey;
    font-weight: 500;
    text-decoration: line-through;
    white-space: nowrap;
  }

  &__regular-price,
  &__sale-price {
    @include font-size(18);
    @include line-height(18);

    color: $blue-dark;
    font-weight: 700;
    white-space: nowrap;
  }

  &__sale-price {
    color: $red;
  }

  &__vat-label,
  &__delivery {
    @include font-size(12);
    @include line-height(15);

    color: $squant;
  }

  &__vat-label {
    color: $blue-dark;
    font-weight: $headings-font-weight;
  }

  &__delivery {
    width: 100%;
  }

  .btn {
    display: flex;
    align-self: flex-end;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid $green;
    border-radius: 3px;
    background-color: $green;
    color: $white;
    cursor: pointer;

    &:hover {
      background-color: $white;
      color: $green;
    }

    &--loading {
      background-color: $green;
      color: $white;
      pointer-events: none;
    }
  }

  &__loader {
    .loader-path {
      stroke: $white;
    }
  }

  &--skeleton {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) 40px;
    grid-template-rows: 14px 14px 12px 18px 15px;
    gap: 6px 8px;
    align-items: start;

    .why-not-add-card {
      &__image {
        grid-column: 1;
        grid-row: 1 / 6;
        width: 68px;
        height: 68px;
      }

      &__skeleton {
        &-title {
          grid-column: 2 / 4;
          grid-row: 1;
          width: 80%;
          height: 14px;
        }

        &-title-short {
          grid-column: 2 / 3;
          grid-row: 2;
          width: 55%;
          height: 14px;
        }

        &-reviews {
          grid-column: 2 / 3;
          grid-row: 3;
          width: 82px;
          height: 12px;
        }

        &-price {
          grid-column: 2 / 3;
          grid-row: 4;
          width: 64px;
          height: 18px;
        }

        &-delivery {
          grid-column: 2 / 3;
          grid-row: 5;
          width: 92px;
          height: 12px;
        }

        &-cta {
          grid-column: 3;
          grid-row: 4 / 6;
          align-self: end;
          width: 40px;
          height: 40px;
          border-radius: 3px;
        }
      }
    }
  }

  &__badge {
    @include bloomreach-card-badge;
    max-width: calc(100% - 52px);
    white-space: normal;
  }

  &__error {
    @include font-size(14);
    @include line-height(22);

    margin-top: 8px;
    width: 100%;
    background: rgba($red, 0.05);
    padding: 8px 10px;
    column-gap: 17px;
    display: flex;
    align-items: center;
    font-weight: 500;

    .icon {
      height: 16px;
      font-size: 16px;
      color: $red;
    }
  }

  &--added {
    .btn {
      opacity: 0.4;
      pointer-events: none;
      cursor: default;

      &:hover {
        background-color: $green;
        color: $white;
      }
    }
  }

  &--failed {
    .btn {
      opacity: 0.4;
      pointer-events: none;
      cursor: default;
    }
  }

  &__cta {
    .button__icon--success {
      margin-right: 0;
    }

    &--success,
    &--error {
      opacity: 1;
      pointer-events: none;
    }

    &--success {
      background-color: $green;
      border-color: $green;
      color: $white;
    }

    &--error {
      background-color: $gray;
      border-color: $gray;
      color: $white;
    }
  }
}

.why-not-add--dont-forget {
  margin-top: 4px;

  .why-not-add-card {
    .why-not-add-card__image {
      width: 124px;
      height: 124px;
    }
  }

  .why-not-add-card {
    &__badge + .why-not-add-card__image,
    &__badge ~ .why-not-add-card__content {
      margin-top: 16px;
    }

    &__bottom {
      flex-grow: 1;
    }
  }
}

[data-dont-forget-widget] {
  .why-not-add-card {
    &--added {
      .btn {
        opacity: 0.6;

        .button__icon--success {
          margin-right: 0;
        }
      }
    }
  }
}

@include media-breakpoint-up(sm) {
  .why-not-add--dont-forget {
    margin-top: 0;

    .why-not-add-card {
      &__badge + .why-not-add-card__image {
        margin-top: 0;
      }
    }
  }
}

@include media-breakpoint-up(md) {
  .why-not-add--dont-forget {
    margin-top: 12px;
  }
}

@media screen and (max-width: 375px) {
  .why-not-add--dont-forget {
    .why-not-add-card {
      .why-not-add-card__image {
        width: 68px;
        height: 68px;
      }
    }
  }

  .why-not-add-card {
    &__vat-label {
      width: 100%;
    }

    &__error {
      @include font-size(12);
    }
  }
}