@import '~@/themes/scss/mixin.scss';
$title-width: 120px;
$input-width: 350px;

.box {
  height: 0;
  transition: height 300ms;
}
.box.incremental-sync-box {
  height: 92px !important;
}

.disabled {
  pointer-events: none;
}

.jdbc-job-section,
.big-query-job-section {
  background: var(--secondary);
  padding: 16px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  &:not(:last-child) {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    margin-bottom: 8px;
  }

  .mb-12px {
    margin-bottom: 12px;
  }
}

.job-form-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: $title-width + $input-width;
  //class="item d-flex w-100 justify-content-center align-items-center"

  .title {
    width: $title-width;
    @include regular-text-14();
    letter-spacing: 0.23px;
    color: var(text-color);
  }

  &:last-child {
    margin-bottom: 12px;
  }

  .input {
    width: $input-width;
    input {
      height: 34px;
      padding-left: 16px;
      @include regular-text();
      font-size: 12px;
      color: var(text-color);
      letter-spacing: 0.17px;
      cursor: text;

      ::-webkit-input-placeholder,
      :-ms-input-placeholder,
      ::placeholder {
        @include regular-text-14();
        letter-spacing: 0.18px;
        color: var(--text-disabled-color, #bebebe) !important;
      }
    }
    .form-check-input {
      width: 16px;
      cursor: default;
    }
  }
  .text-connection {
    color: var(--accent);
  }

  .accordion-toggle {
    -webkit-transition: height 0.1s linear;
    -moz-transition: height 0.1s linear;
    -ms-transition: height 0.1s linear;
    -o-transition: height 0.1s linear;
    transition: height 0.1s linear;
  }

  .height-empty {
    height: 0;
  }

  .empty-item {
    height: 82px;
  }
}
.job-form-item + .job-form-item {
  margin-top: 12px;
}

.job-scheduler-form-jdbc {
  padding-top: 0;

  label,
  .text {
    color: var(--text-color);
    opacity: 1 !important;
  }

  .job-scheduler-form-group.pt-2 {
    padding-top: 0 !important;
  }

  .job-scheduler-form-group {
    margin-bottom: 12px !important;
    display: flex;
    align-items: center;
    > label {
      width: $title-width;
      margin-bottom: 0 !important;
    }

    .select-container {
      margin: 0;
    }

    #job-scheduler-type {
      width: $input-width;
      > div {
        height: 34px;
      }
    }

    .frequency-options {
      > label:first-child {
        width: $title-width !important;
      }
    }
  }
  .run-only-once {
    width: $input-width;
    margin-left: auto;
    .job-scheduler-form-group {
      display: flex;
      flex-direction: column;
      text-align: left;
      label {
        width: 100%;
      }
      .input-container {
        width: 100%;
        .input-calendar {
          margin-left: auto;
          padding-left: 16px;
          width: calc(100% - 16px);
          margin-left: 4px;
        }
      }
    }
  }
}
