@import "../../components/form-fields/input-card";

.ac-object-field-wrapper {
  display: grid;
  grid-template-columns: auto auto 45px;
  grid-gap: 16px;
}

.ac-array-field-wrapper {
  display: grid;
  grid-template-columns: auto 99px;
  grid-gap: 16px;
}

.ui-builders-wrapper {
  width: 800px;

  h5 {
    margin-bottom: 10px;
  }

  p {
    font-size: 1rem;
    margin-bottom: 10px;
    color: $color-text;
  }
}

.key-value-save {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  grid-gap: 16px;

  &.has-close {
    grid-template-columns: 1fr 1fr auto auto;
  }
}

.key-value-save-check {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  grid-gap: 16px;
}

.key-save {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 16px;
}

.value-list-save {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 16px;
}

// nested elements start

.ac-nested-elements {
  padding-left: 20px;
  position: relative;
  z-index: 1;
  &.before-none {
    &::before {
      display: none;
    }
  }
  &.is-borderless {
    &::after,
    &::before {
      display: none;
    }
    .nested-body {
      padding-left: 4px;
    }
  }

  &:first-child {
    margin-left: -20px;
  }

  &.is-active {
    &::after {
      border: 1px dashed $ac-primary;
    }

    &::before {
      background-color: $ac-primary;
    }

    .nested-header {
      h6 {
        .collaps-icon {
          border: 1px solid $ac-primary !important;
          color: $ac-primary !important;
        }
      }
    }
  }

  &::after {
    position: absolute;
    content: "";
    left: 27px;
    top: 10px;
    width: 1px;
    height: calc(100% - 20px);
    border: 1px dashed $color-border;
    z-index: -1;
  }

  &::before {
    position: absolute;
    content: "";
    left: 22px;
    bottom: 6px;
    width: 12px;
    height: 12px;
    background-color: $color-border;
    border-radius: 50%;
    z-index: -1;
  }

  .nested-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;

    h6 {
      display: flex;
      align-items: center;
      cursor: pointer;

      .collaps-icon {
        width: 16px;
        height: 16px;
        line-height: 16px;
        display: inline-block;
        text-align: center;
        font-size: 10px;
        border: 1px solid $color-border;
        border-radius: 50%;
        margin-right: 10px;
        cursor: pointer;
        background-color: $white-100;
        color: $color-text;

        &.is-disabled {
          cursor: not-allowed;
        }
      }
    }
  }

  .nested-body {
    padding-left: 24px;
  }
}

.footer-bottom-fixed {
  position: fixed !important;
  bottom: 8px !important;
  width: calc(100% - 280px);
  border-top: 1px solid $color-border;
  padding-top: 8px;
  margin-left: -20px;
  margin-right: -20px;
  padding-inline: 20px;
}

// nested elements end

// .table-wrapper {
//   overflow-x: auto;

//   .table-inner {
//     min-width: 630px;

//     .thead {
//       background-color: $color-border;

//       .tr {
//         .th {
//           font-weight: 600;
//         }
//       }
//     }

//     .thead,
//     .tbody {
//       .tr {
//         display: flex;
//         flex-wrap: nowrap;
//         align-items: center;
//         justify-content: space-between;

//         .th,
//         .td {
//           width: 20%;
//           font-size: 1rem;
//           min-width: 150px;
//           padding: 6px 20px;
//         }
//       }
//     }

//     .tbody {
//       .tr {
//         border-bottom: 1px solid $color-border;
//       }
//     }
//   }

//   .is-selected {
//     border: 1px solid $ac-primary;
//     border-bottom: 1px solid $ac-primary !important;
//     border-radius: 4px;
//   }
// }

.is-collapsed {
  &.ac-nested-elements::before,
  &.ac-nested-elements::after {
    display: none;
  }
}

// details with checkradio
.details-with-checkradio-wrapper {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}
// .table {
//   tr {
//     &.is-selected {
//       background-color: $primary-97;
//       strong {
//         color: $ac-primary;
//       }
//     }
//   }
// }
// dark theme start
// .is-dark-theme {
//   .nested-body {
//     code {
//       background-color: var(--dark-bg-light);
//     }
//   }
// }

// label action start
.label-action {
  align-items: center;
  height: 21px;

  .ac-single-input {
    label {
      margin-top: 2px;
    }
  }

  button:not(.is-text) {
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease-in-out;

    img {
      width: 16px;
    }

    &.label-icon {
      border: none;
      background-color: transparent;
      cursor: pointer;
      padding: 0;
      transition: 0.3s ease-in-out;

      &:hover {
        opacity: 0.8;
      }
    }
  }

  &:hover {
    button {
      opacity: 1;
      visibility: visible;
    }
  }

  .ms-close-button,
  .ac-modal-footer {
    .buttons {
      button {
        opacity: 1;
        visibility: visible;

        &:hover {
          opacity: 0.7;
        }
      }
    }
  }

  .label-icon {
    display: flex;
    align-items: center;
    margin-right: 10px;

    img {
      width: 16px;
    }
  }

  strong {
    font-style: normal;
    font-weight: 500;
    font-size: 1rem;
    line-height: 16px;
    color: $color-heading;
    margin-right: 16px;
  }
}

//For resource input from
.resource-input {
  display: grid;
  grid-template-columns: 60px 1fr 1fr;
  grid-gap: 16px;
  align-items: center;
  margin-bottom: 16px;

  .label-text {
    font-weight: 300;
  }

  .ac-single-input {
    margin: 0;
  }
}

.pass-strength {
  position: absolute;
  right: 30px;
  top: 7px;
}

.ac-final-state {
  margin-bottom: 10px;

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

  .state-left {
    h5 {
      font-style: normal;
      font-weight: 500;
      font-size: 14px;
      line-height: 19px;
      color: $color-heading;
    }

    button {
      &.ac-button {
        opacity: 0;
        visibility: hidden;
        transition: 0.3s ease-in-out;
      }
    }
  }

  &:hover {
    .state-left {
      button {
        &.ac-button {
          opacity: 1;
          visibility: visible;
        }
      }
    }
  }
}

.up-down-buttons {
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  max-width: 36px;
  margin-bottom: 0 !important;
  button {
    width: 36px;
    height: 18px;
    cursor: pointer;
    border: none;
    color: $ac-primary;
    background-color: $color-border;
    transition: 0.3s ease-in-out;
    &:hover {
      background-color: $primary-80;
    }
    &.is-primary {
      background-color: $ac-primary;
      color: $white-100;
      &:hover {
        background-color: $primary-30;
      }
    }
    .icon {
      margin: 0;
      padding: 0;
      width: auto;
      height: auto;
    }
  }
}
// buttons
// .button {
//   &.ac-button {
//     &.is-medium {
//       font-size: 1rem;
//       height: 36px;
//       &.is-square {
//         width: 36px;
//         align-items: center;
//         justify-content: center;
//       }
//     }
//     &.is-tinny {
//       height: 24px;
//       padding: 0 8px;
//     }
//   }
// }

// .button[disabled] {
//   &.is-ghost {
//     border-color: transparent !important;
//   }
// }

p.is-error,
span.is-error {
  color: $danger;
  font-weight: 400;
}
.circle-list-shape {
  width: 6px;
  height: 6px;
  background-color: $gray-40;
  display: flex;
  border-radius: 50%;
}