@import "../../../assets/scss/variables";

.dynamic-forms-controller {


  .forms-nav {
    display: flex;
    gap: 30px;
    margin-bottom: 50px;

    .form-nav-item {
      height: 50px;
      background: $grayish-box-background;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 300px;
      cursor: pointer;
color: $text-color;
      &:hover {
        background: $inactive-color;

      }

      &.active {
        pointer-events: none;
      }

    }
  }
}

.document-attachments {
  display: flex;
  gap: 20px;

  a {
    display: flex;
    flex-direction: column;
    align-items: center;

    img {
      object-fit: contain;
    }

    span {
      color: $text-color;
    }

  }
}

.create-form {


  .add-field {
    padding: 30px;
    background: lightblue;
  }

  .form-preview {
    .form-field-wrapper {
      position: relative;

      .delete {
        cursor: pointer;
        display: none;
        position: absolute;
        top: 0;
        right: 0;
      }

      &:hover {
        .delete {
          display: initial;
        }
      }
    }
  }
}


.iterable-section-control {

  position: absolute;
  right: -33px;

  //top: 10px;

  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  gap: 5px;
  div {
    cursor: pointer;
    //margin-bottom: 5px;
  }
}