@import '../helpers/helpers';

.installer_question {
  &-wrap {
    &.title {
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.5rem;
    }

    &.block {
      flex-direction: column;
      width: 100%;
    }

    .fas,
    .svg-inline--fa.fa-w-16 {
      width: 19px;
      height: 19px;
    }
  }

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

    &_wrapper {
      display: flex;
      align-items: center;
      margin: 10px 0;
      flex-wrap: wrap;
    }

    &_description {
      @include make-col(12);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-bottom: 5px;

      &--secondary {
        font-size: 12px;
      }
    }
  }

  &-half-wrap-radio {
    display: flex;
    flex-flow: column;

    .rbn {
      margin-bottom: 10px;
    }
  }

  &-file {
    &_wrapper {
      display: block;

      .installer_question-file_result_wrapper {
        margin-bottom: 15px;
      }

      &:last-child {
        .installer_question-file_result_wrapper {
          margin-bottom: 0;
        }
      }
    }

    &_list {
      margin-bottom: 20px;

      &.hide {
        display: none;
      }
    }

    &_input {
      display: none;
    }

    &_label {
      cursor: pointer;

      &.hide {
        display: none;
      }
    }

    &_link {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      color: $blue;

      span {
        padding-left: 5px;
      }
    }

    &_result {
      &_wrapper {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        min-height: 50px;

        &.hide {
          display: none;
        }
      }

      &_image {
        margin-right: 15px;
      }

      &_options_wrapper {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
      }

      &_option {
        margin-bottom: 0;

        svg {
          font-size: 18px;
        }

        &.option_name {
          svg {
            color: $green;
          }
        }

        &.delete_action {
          color: $blue;
          margin-top: 5px;
          cursor: pointer;
        }

        span {
          padding-left: 5px;
        }
      }
    }
  }
}


@include media-breakpoint-up(md) {
  .installer_question {
    &-radio {
      display: flex;
      flex-wrap: nowrap;
      width: 125px;
      flex: 0 0 auto;

      &_wrapper {
        display: flex;
        align-items: center;
        margin: 10px 0;
        flex-wrap: nowrap;
        justify-content: space-between;
      }

      &_description {
        @include make-col(2, 3);
        flex-direction: column;
        justify-content: space-between;
        margin: 0;
      }
    }

    &-half-wrap-radio {
      flex-flow: row;
      justify-content: space-between;
    }
  }
}