@import '../helpers/helpers';

.wisdom {
  background: $white;

  &-pdp {
    border: 1px solid $gray;
    margin-top: 20px;
    padding: 20px 15px;

    &.wisdom-mcfc {
      display: none;
    }

    &.wisdom__added {
      .wisdom {
        &__description {
          &-default,
          &-partial {
            display: none;
          }

          &-added {
            display: inline;
          }
        }
      }

      & .btn__text {
        display: inline;

        &-oos,
        &-partial {
          display: none;
        }
      }
    }

    &.wisdom__partial-added {
      display: flex;
      flex-direction: column;

      .wisdom {
        &__description {
          &-default,
          &-partial,
          &-added {
            display: none;
          }

          &-partial-added {
            display: inline;
          }
        }

        &__input {
          display: none;
        }

        &__col {
          @include make-col(12);
          padding-left: 0;
          padding-right: 0;
        }
      }

      & .wisdom__change {
        order: 3;
        margin-bottom: 0;
      }

      & .wisdom__btn-add {
        display: none;
      }
    }

    .wisdom {
      &__change {
        margin-bottom: 12px;
      }

      &__input {
        margin-bottom: 12px;
      }
    }
  }

  &-plp {
    margin-top: 20px;

    .wisdom {
      &__btn-add {
        display: none;
      }

      &__add-form {
        display: flex;
        flex-wrap: wrap;
      }

      &__col {
        @include make-col(6);

        &:first-child {
          padding-right: 10px;
        }

        &:last-child {
          padding-left: 10px;
        }
      }

      &__error {
        order: 3;
        flex: 1;
        max-width: 100%;
        margin-top: .5rem;
        margin-bottom: 0;
      }

      &__change {
        margin-bottom: 15px;
        margin-top: 10px;
      }
    }

    &.wisdom__added {
      .wisdom {
        &__description {
          &-default,
          &-partial,
          &-added {
            display: none;
          }
        }

        &__input,
        &__btn-check {
          display: none;
        }

        &__btn-add {
          display: block;
        }

        &__col {
          @include make-col(12);
          padding: 0;
        }
      }
    }

    &.wisdom__oos {
      .wisdom {
        &__btn-check {
          display: none;
        }

        &__btn-add {
          display: block;
        }
      }
    }

    &.wisdom__partial {
      .wisdom {
        &__btn-check {
          display: none;
        }

        &__btn-add {
          display: block;
        }

        &__description {
          margin-bottom: 15px;
        }
      }
    }
  }

  &-basket {
    .wisdom {
      &__btn-add {
        display: none;
      }

      &__add-form {
        display: flex;
        flex-wrap: wrap;
      }

      &__error {
        order: 3;
      }

      &__col {
        @include make-col(6);

        &:first-child {
          padding-right: 5px;
        }

        &:last-child {
          padding-left: 5px;
        }
      }

      &__notification {
        .notification {
          padding-bottom: 10px;
          margin-bottom: 0;
          text-transform: none;

          b {
            text-transform: uppercase;
          }
        }
      }

      &__change {
        margin-bottom: 15px;
      }
    }

    &.wisdom__added,
    &.wisdom__oos {
      .wisdom {
        &__description,
        &__btn-check,
        &__input {
          display: none;
        }

        &__btn-add {
          display: block;
        }

        &__col {
          @include make-col(12);
          padding: 0;
        }
      }
    }

    &.wisdom__partial {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;

      .wisdom {
        &__notification {
          order: 1;

          .notification {
            padding-bottom: 15px;
          }
        }

        &__description {
          order: 2;
        }

        &__change {
          order: 3;
          margin-bottom: 15px;
          margin-top: 5px;
        }

        &__add-form {
          order: 4;
        }

        &__btn-check,
        &__input {
          display: none;
        }

        &__btn-add {
          display: block;
        }

        &__col {
          @include make-col(12);
          padding: 0;
        }
      }
    }


    //&.wisdom__added {
    //  .wisdom {
    //    &__description {
    //      &-default,
    //      &-partial {
    //        display: none;
    //      }
    //
    //      &-added {
    //        display: inline;
    //      }
    //    }
    //  }
    //
    //  & .btn__text {
    //    display: inline;
    //
    //    &-oos,
    //    &-partial {
    //      display: none;
    //    }
    //  }
    //}
    //
    //&.wisdom__partial-added {
    //  display: flex;
    //  flex-direction: column;
    //
    //  .wisdom {
    //    &__description {
    //      &-default,
    //      &-partial,
    //      &-added {
    //        display: none;
    //      }
    //
    //      &-partial-added {
    //        display: inline;
    //      }
    //    }
    //
    //    &__input {
    //      display: none;
    //    }
    //
    //    &__col {
    //      @include make-col(12);
    //      padding-left: 0;
    //      padding-right: 0;
    //    }
    //  }
    //
    //  & .wisdom__change {
    //    order: 3;
    //    margin-bottom: 0;
    //  }
    //
    //  & .wisdom__btn-add {
    //    display: none;
    //  }
    //}
    //.wisdom {
    //  &__change {
    //    margin-bottom: 12px;
    //  }
    //
    //  &__input {
    //    margin-bottom: 12px;
    //  }
    //}
  }

  &__btn-add {
    & .btn__text {
      display: inline;

      &-oos,
      &-partial {
        display: none;
      }
    }
  }

  &-modal {
    &__wrapper {
      margin-top: 20px;
      margin-bottom: 30px;
    }

    &__product {
      .wisdom-modal {
        &__label {
          padding-right: 15px;
        }
      }
    }
  }

  &__description {
    margin-bottom: 8px;

    &-added,
    &-partial,
    &-partial-added {
      display: none;
    }
  }

  &__oos {
    .wisdom {
      &__description {
        display: none;
      }

      &__input {
        display: none;
      }

      &__col {
        @include make-col(12);

        &:last-child {
          padding-left: 0;
        }
      }
    }

    & .btn__text {
      display: none;

      &-oos {
        display: inline;
      }
    }
  }

  &__partial {
    .wisdom {
      &__change {
        margin: 15px 0 10px;
      }

      &__col {
        @include make-col(12);

        &:last-child {
          padding-left: 0;
        }
      }

      &__input {
        display: none;
      }

      &__description {
        &-default,
        &-added {
          display: none;
        }

        &-partial {
          display: inline;
        }
      }
    }

    & .btn__text {
      display: none;

      &-partial {
        display: inline;
      }
    }
  }

  &__add-form {
    &-error {
      .wisdom {
        &__error {
          display: block;
        }
      }

      & input {
        border-color: $red;
      }
    }

    label {
      width: 100%;
    }

    .form-row__field {
      padding: 0;
    }

    &-hide {
      display: none;
    }
  }

  &__warning {
    margin-top: 3px;
    margin-bottom: 23px;
    color: $red;
    font-weight: 500;
    font-size: .875rem;

    &-hide {
      display: none;
    }
  }

  &__change {
    margin: 0 0 5px;

    &-hide {
      display: none;
    }
  }

  &__error {
    display: none;
    color: $red;
    line-height: 1rem;
    font-size: .75rem;
  }

  &__notification {
    .notification {
      border: 0;
    }
  }

  .notification {
    margin-bottom: 15px;

    &_oos,
    &_partial,
    &_available {
      padding: 0 0 0 20px;

      & .icon {
        left: -5px;
        top: 0;
      }
    }

    &_oos {
      .icon {
        color: $red;
      }
    }

    &_partial {
      .icon {
        color: $yellow;
      }
    }

    &_available {
      .icon {
        color: $green;
      }
    }
  }

  &-btn-add {
    margin-top: 20px;
  }
}

.wisdom-mcfc {
  &__modal {
    & .modal-dialog.modal-dialog {
      top: 50%;
      transform: translateY(-50%);

      .modal-box {
        &__inner-columns {
          padding-left: 20px;
          padding-right: 20px;
        }
      }
    }

    .wisdom {
      &__description {
        margin-bottom: 20px;
      }

      &-modal {
        &__wrapper {
          margin-bottom: 20px;
        }
      }
    }

    .btn {
      margin-top: 13px;
    }
  }
}

@include media-breakpoint-up(sm) {
  .wisdom {
    &-plp {
      margin-top: 0;
    }

    &-modal {
      &__wrapper {
        display: flex;
      }

      &__product {
        @include make-col(4);
      }

      &__wisdom {
        @include make-col(8)
      }
    }

    &-btn {
      padding-left: 0;
      padding-right: 0;
    }
  }

  .wisdom-mcfc {
    &__modal {
      .modal-box {
        &__inner-row {
          margin: 0;
        }

        &__inner-columns {
          @include make-col(12);
        }
      }

      .wisdom-modal {
        &__wrapper {
          display: block;
          margin-top: 30px;
          margin-bottom: 22px;
        }
      }

      .wisdom {
        &__add-form {
          display: flex;
          flex-wrap: wrap;

          .btn {
            margin-top: 0;
          }
        }

        &__col {
          @include make-col(6);

          &:first-of-type {
            padding-right: 10px;
          }

          &:last-of-type {
            padding-left: 10px;
          }
        }

        &__error {
          order: 3;
          min-width: 100%;
        }
      }
    }
  }
}


@include media-breakpoint-up(md) {
  .wisdom {
    &-modal {
      &__product {
        @include make-col(5);
      }

      &__wisdom {
        @include make-col(7)
      }
    }

    .notification {
      &_success {
        padding-right: 10px;
      }
    }
  }
}

@include media-breakpoint-up(xl) {
  .wisdom {
    &__add-form {
      display: flex;
      flex-wrap: wrap;

      &-hide {
        display: none;
      }
    }

    &__col {
      @include make-col(6);

      & label {
        margin-bottom: 0;
      }

      &:first-child {
        padding-right: 10px;
      }

      &:last-child {
        padding-left: 10px;
      }
    }

    &__error {
      order: 3;
      flex: 1;
      max-width: 100%;
      margin-top: .5rem;
      margin-bottom: 0;
    }

    &__btn-add {
      margin-top: 0;
    }

    &-pdp {
      .wisdom {
        &__input {
          margin-bottom: 0;
        }
      }
    }
  }
}