@import '../helpers/mixins';

.wisdom {
  background: $white;

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

    &.wisdom-mcfc {
      display: none;
    }

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

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

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

  &__description {
    margin-bottom: 8px;

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

  &__add-form {
    label {
      width: 100%;
    }

    .form-row__field {
      padding: 0;
    }

    &-hide {
      display: none;
    }
  }

  &__change {
    margin: 0 0 5px;

    &-hide {
      display: none;
    }
  }

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

@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;
        }
      }
    }
  }
}