@import '../helpers/helpers';

.installer {
  &-container {
    text-align: center;
  }

  &__loader {
    display: none;

    &.show {
      display: block;
    }
  }

  &__accordion {
    padding: 20px 0;
    border-bottom: 1px solid $gray;

    &__header {
      color: $blue;
      margin-bottom: 0;
      padding-left: 34px;
      position: relative;
    }

    &__content {
      padding: 10px 34px 0;
    }
  }


  &-info {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    margin: 20px 0 40px;

    &-thank {
      margin-bottom: 30px;
    }

    &__list {
      margin: 30px;
      text-align: left;
      line-height: 16px;
      padding-inline-start: 15px;

      &-item {
        padding-left: 10px;
      }
    }
  }

  .form-row__error {
    padding: 10px 15px;
    margin: 0 0 10px;
    text-align: center;
    border: 1px solid $red;
    background-color: $red-transparent5;
    font-size: 12px;
    font-weight: 500;
    color: $red;

    .tel-uri {
      @include link-secondary;
      text-decoration: underline;
    }

    p:last-child {
      margin-bottom: 0;
    }
  }

  &-step-errors {
    [data-step] {
      display: none;
      margin-top: 10px;
    }

    &[data-step='1'] {
      &[data-step-error] {
        &[data-error-required] {
          [data-step='1'][data-error-required] {
            display: block;
          }
        }

        &[data-error-validation] {
          [data-step='1'][data-error-validation] {
            display: block;
          }
        }
      }
    }

    &[data-step='2'] {
      &[data-step-error] {
        &[data-error-required] {
          [data-step='2'][data-error-required] {
            display: block;
          }
        }

        &[data-error-validation] {
          [data-step='2'][data-error-validation] {
            display: block;
          }
        }
      }
    }

    &[data-step='3'] {
      &[data-step-error] {
        &[data-error-required] {
          [data-step='3'][data-error-required] {
            display: block;
          }
        }

        &[data-error-validation] {
          [data-step='3'][data-error-validation] {
            display: block;
          }
        }

        &[data-error-submit] {
          [data-step='3'][data-error-submit] {
            display: block;
          }
        }
      }
    }
  }

  &-application {
    background-color: $gray-bg;
    padding: 20px;

    .heading {
      font-size: 24px;
      font-weight: 500;
      letter-spacing: 0;
      padding-bottom: 25px;
      margin: 0;
      border-bottom: 1px solid $gray;
    }

    &[data-step='1'] {
      .installer-block {
        &[data-step='1']:not([data-step-finished]) {
          .installer-block__header {
            color: $gray-dark;
          }
        }
      }
    }

    &[data-step='2'] {
      .installer-block {
        &[data-step='2']:not([data-step-finished]) {
          .installer-block__header {
            color: $gray-dark;
          }
        }
      }
    }

    &[data-step='3'] {
      .installer-block {
        &[data-step='3']:not([data-step-finished]) {
          .installer-block__header {
            color: $gray-dark;
          }
        }
      }
    }
  }

  &-block {
    text-align: initial;
    padding: 0;

    &[data-step-finished] {
      .installer-block__header {
        color: $blue;

        &-icon {
          display: inline-block;
          vertical-align: middle;
          color: $green;
          width: 24px;
          height: 24px;
          margin-right: 16px;
        }
      }
    }

    &__header {
      font-size: 20px;
      font-weight: 500;
      line-height: 24px;
      color: $gray;
      text-align: center;
      margin: 25px 0;
      padding-left: 0;

      &-icon {
        display: none;
      }

      &.finish-block__header {
        color: $blue;

        .installer-block__header-icon {
          display: inline-block;
          vertical-align: middle;
          color: $green;
          width: 24px;
          height: 24px;
          margin-right: 16px;
        }
      }
    }

    &__content {
      padding: 15px 0 0;

      .form-row {
        margin: 0;
        padding: 0;

        .form-row__label {
          font-size: 14px;
          font-weight: bold;
          line-height: 16px;
          margin: 10px 0;
          padding: 0;
        }

        .form-row__field {
          display: flex;
          flex-direction: column;
          padding: 0 0 10px;

          &-item {
            margin-bottom: 10px;
          }
        }

        .submit-condition {
          margin: 10px 0;

          .warning-required {
            font-size: 14px;
            font-weight: bold;
            line-height: 16px;
          }
        }
      }

      .additional-form {
        display: none;
        padding: 10px 20px 0;

        .form-row__label {
          padding: 0;
        }

        .form-row__error {
          margin: 10px 0 0;
        }

        .select-checkbox__half-wrap {
          display: flex;
          flex-flow: column;

          .chb {
            @include make-col(12);
         }
        }
      }
    }
  }

  &-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 30px 0 20px;

    &[data-step='1'] {
      .btn {
        &[data-step='1'] {
          display: inline-block;
        }
      }

    }

    &[data-step='2'] {
      .btn {
        &[data-step='2'] {
          display: inline-block;
        }
      }
    }

    &[data-step='3'] {
      .btn {
        &[data-step='3'] {
          display: inline-block;
        }
      }
    }

    .btn {
      width: 100%;
      display: none;

      .fa-arrow-left,
      .fa-arrow-right {
        margin: 0 10px;
      }
    }

    .btn-secondary {
      margin: 0 0 20px;
    }
  }

  .border-dashed {
    border-bottom: 1px dashed $gray-gray;

    &-list + .border-dashed-list {
      border-top: 1px dashed $gray-gray;
    }
  }

  .your-details__add-radio {
    .rbn {
      font-size: 14px;
      line-height: 24px;
    }
  }

  .select-checkbox,
  .select-radio {
    align-items: flex-start;
  }

  .select-radio .rbn,
  .select-checkbox .chb {
    margin-bottom: 10px;
  }
}

.touch-device .installer .ddn select {
  font-size: .875rem;
  line-height: 1rem;
}

@include media-breakpoint-up(md) {
  .installer {
    &-action {
      flex-direction: row;
      justify-content: center;
      margin: 40px 0 30px;

      .btn {
        width: 250px;
      }

      .btn-secondary {
        margin: 0 30px 0 0;
      }
    }

    &-application {
      padding: 40px 125px;
    }

    &-block {
      &__content {
        .additional-form {
          padding: 10px 35px 0;

          .select-checkbox__half-wrap {
            flex-flow: wrap;

            .chb {
              @include make-col(6);
           }
          }
        }
      }
    }

    .select-form {
      @include make-col(6);
    }

    .form-row__error {
      padding: 15px 50px;
      font-size: 15px;
    }

    &-step-errors {
      [data-step] {
        margin-top: 15px;
      }
    }
  }
}

@include media-breakpoint-up(lg) {
  .installer {
    &-container {
      max-width: 800px;
    }

    &-info {
      margin: 30px 0 60px;

      &-thank {
        margin-bottom: 40px;
      }

      &__list {
        width: 600px;
        margin: 40px auto;
      }
    }
  }
}