@use "../base/mixins";
@use "../vars/variables";

.integration-list {
  display: flex;
  width: 100%;

  &__body {
    display: flex;
    flex: 1;
    overflow-y: auto;
    padding-right: 0.5rem;
    @include mixins.scrollbar;
  }
}

.add-integration {
  @include mixins.list-borders-dark;
  @include mixins.transition-opacity;

  .modal {
    &__header {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.625rem;
      padding: 0 2rem;

      .selected-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3.75rem;
        max-height: 3.75rem;

        @media screen and (max-width: variables.$bp-tablet) {
          width: 2rem;
        }
      }
    }

    &__body {
      justify-content: center;
      width: 100%;

      &__loading {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        background: var(--uc-background);
        left: -250%;
        width: 600%;
        height: 100%;
        gap: 1.25rem;

        span {
          @include mixins.body-large;
          color: var(--uc-color);
        }

        .img-loading {
          display: flex;
          width: 2.5rem;
          height: 2.5rem;
        }
      }

      // &__step {
      //   max-width: 34.25rem;
      //   overflow-y: auto;

      //   @media screen and (min-width: $bp-tablet-plus) {
      //     width: calc(100% + 1.75rem);
      //     padding-right: 1.75rem;
      //     @include scrollbar;
      //   }

      //   @media screen and (max-width: $bp-tablet) {
      //     height: auto;
      //     height: fit-content;
      //     padding-bottom: 1.875rem;
      //     max-width: 100%;
      //     overflow-x: hidden;
      //   }

      //   &__body {
      //     flex: none;
      //     height: fit-content;
      //   }
      // }
    }
  }

  &__header {
    &__name {
      text-align: center;
    }

    &__badge {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      border-radius: 1.25rem;
      color: var(--uc-theme-color-50);
      background: var(--uc-theme-color-20);
      padding: 0.25rem 0.375rem;
      font-size: 0.625rem;
      max-height: 1.3125rem;
    }
  }

  &__step {
    .modal--add__base-data {
      max-width: 33rem;
    }

    &__title {
      @include mixins.body-large;
      color: var(--uc-text-text-primary);
    }

    &__description {
      @include mixins.body-small;
      color: var(--uc-text-text-secondary);
      text-align: center;
    }

    &__icon {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 3.75rem;
      height: 3.75rem;
      margin-bottom: -0.575rem;

      i {
        font-size: 2.25rem;
      }

      &--red {
        i {
          color: var(--uc-error-error-60);
        }
      }

      &--green {
        i {
          color: var(--uc-success-success);
        }
      }
    }

    &__error {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1rem;
      @include mixins.body-small;
      color: var(--uc-error-error-60);
      padding: 0.75rem 0.625rem;

      i {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 2rem;
        height: 2rem;
        font-size: 1.2rem;
        border-radius: 50%;
        color: var(--uc-background);
        background-color: var(--uc-error-error-80);
      }
    }

    &__buttons {
      display: flex;
      width: 100%;
      justify-content: center;
      gap: 1.875rem;
      margin-top: 1.875rem;
      padding-right: 0.5rem;

      .button {
        flex: 1;
      }
    }

    &__option-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.625rem;
      width: 100%;
      padding: 1.25rem 0 2.5rem;
      margin-bottom: 1.25rem;
      cursor: pointer;
      border-bottom: 1px solid var(--uc-theme-color-20);

      &:last-child {
        border: 0;
        padding-bottom: 1.25rem;
        margin-bottom: 0;
      }

      &__icon {
        display: flex;
        justify-content: center;
        width: 3.75rem;

        i {
          font-size: 2.25rem;
        }
      }

      &__text {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        flex: 1;
      }

      &__title {
        @include mixins.body-large;
        color: var(--uc-text-text-primary);
      }

      &__description {
        @include mixins.body-extrasmall;
        color: var(--uc-text-text-secondary);
      }

      &__action {
        display: flex;
        justify-content: center;
        width: 3.75rem;

        i {
          font-size: 1.5rem;
          color: var(--uc-text-text-secondary);
        }
      }
    }

    &--connect-external {
      .add-integration__step__title {
        width: 100%;
        text-align: left;
      }

      .modal--add__base-data {
        padding-right: 0;
        overflow-y: hidden;
      }

      .add-integration__configuration-form {
        flex: 1;
        padding-right: 0.5rem;
        margin-bottom: 0;
        overflow-x: hidden;
        overflow-y: auto;
        @include mixins.scrollbar;
      }
    }

    &--setup {
      &__already-configured {
        .add-integration__step__description {
          @include mixins.body-large;
          color: var(--uc-text-text-primary);
        }
      }

      &__add-elements {
        .add-integration__step__title {
          margin-bottom: -1.875rem;
        }

        .modal--add__base-data {
          min-height: 31rem;

          @media screen and (max-height: 650px) and (min-width: variables.$bp-tablet-plus) {
            min-height: 70vh;
            min-height: 70dvh;
          }

          @media screen and (max-width: variables.$bp-tablet) {
            min-height: 80vh;
            min-height: 80dvh;
          }
        }
      }

      &__result-success {
        .databoard {
          margin-bottom: 1.875rem;
        }
      }

      &__result-success,
      &__result-error {
        .modal--add__base-data {
          overflow-y: hidden;

          .add-integration__message-form {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            flex: 1;
            gap: 1.875rem;
            // padding-right: 0.5rem;
            width: 100%;
            margin-bottom: 0;
            overflow-x: hidden;
            overflow-y: auto;
            @include mixins.scrollbar;

            @media screen and (max-width: variables.$bp-tablet) {
              justify-content: flex-start;
            }
          }
        }
      }

      &__form {
        .modal--add__base-data {
          overflow-y: hidden;
        }

        .add-integration__configuration-form,
        .add-integration__confirmation-form {
          flex: 1;
          padding-right: 0.5rem;
          margin-bottom: 0;
          overflow-x: hidden;
          overflow-y: auto;
          @include mixins.scrollbar;
        }
      }
    }
  }

  &__configuration-form {
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
    width: 100%;
    min-height: 4rem;
    margin-bottom: 1.875rem;
    flex: none;

    @media screen and (max-width: variables.$bp-tablet) {
      justify-content: flex-start;
    }
  }

  &__confirmation-form {
    @include mixins.body-large;
    color: var(--uc-text-text-secondary);
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
    width: 100%;
    margin-bottom: 1.875rem;
    flex: none;

    @media screen and (max-width: variables.$bp-tablet) {
      justify-content: flex-start;
    }

    h4 {
      @include mixins.body-small;
      color: var(--uc-text-text-primary);
    }

    img {
      width: 100%;
    }
  }

  &__field {
    &--label {
      @include mixins.body-small;
      color: var(--uc-text-text-secondary);

      &__label {
        @include mixins.body-large;
        color: var(--uc-text-text-primary);
        margin-bottom: 1.88rem;
      }
    }

    &--dropdown {
      .select-extra {
        display: flex;
        justify-content: space-between;

        @media screen and (max-width: variables.$bp-tablet) {
          flex-direction: column;
          align-items: flex-start;
          gap: 0.625rem;
        }

        .v-select {
          max-width: 60%;
          width: fit-content !important;

          .vs__dropdown-toggle {
            width: fit-content;
            max-width: 100%;
          }
        }
      }

      &__error {
        @include mixins.body-extrasmall;
        width: 100%;
        text-align: left;
        color: var(--uc-error-error-60);
        margin-top: 0.25rem;
      }
    }
  }

  .databoard {
    &__row {
      &--developer {
        .databoard__item {
          max-width: 50%;
        }

        @media screen and (max-width: variables.$bp-phone) {
          flex-direction: column;
          align-items: flex-start;

          .databoard__item {
            max-width: 100%;
            padding-bottom: 1.25rem;
            border-bottom: 1px solid var(--uc-theme-color-30);

            &:last-child {
              padding-bottom: 0;
              border: 0;
            }
          }
        }
      }
    }
  }
}

.import-custom-integration {
  .modal-secondary {
    &__body {
      overflow-y: hidden;

      .form-item--checkbox-tick {
        margin-top: 1.25rem;
        margin-bottom: 1.25rem;
        gap: 0.625rem;

        label:not(.toggle) {
          @include mixins.body-large;
          color: var(--uc-text-text-primary);
        }
      }
    }

    &__footer {
      .button {
        flex: 1;
      }
    }
  }
}

.driver-connection-modal {
  .modal-secondary {
    &__container {
      min-height: 20rem;
    }

    &__body {
      gap: 1.25rem;
      padding-bottom: 1px;
    }

    &__footer {
      .button {
        flex: 1;
      }
    }
  }
}