@use '/src/components/config' as *;

.dynamic-fields-wrapper {
  padding: 2rem;

  .dynamic-form {
    .form-group {
      margin: 1.25rem 0;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;

      .settings-form-label {
        width: 27%;
        word-wrap: break-word;
      }

      .settings-input-content {
        width: 70%;
        position: relative;
        line-height: 1.5;

        .select-input-section {
          width: 100%;
          position: relative;
        }

        .toggle-checkbox {
          position: relative;
          margin-right: 0.5rem;

          .admin-pro-tag {
            left: 4.25rem;
            width: fit-content;
          }

          &::after {
            content: "";
            position: absolute;
            top: 50%;
            right: 0.45rem;
            width: 0.25rem;
            height: 0.25rem;
            border: $border-theme-small;
            border-radius: $border-radius-button;
            transition: 0.3s;
            z-index: 0;
            transform: translateY(-50%);
          }

          input {
            display: none; // Hide for toggle button
          }

          label {
            cursor: pointer;
            width: 3rem;
            height: 1.4rem;
            background: 0 0;
            display: block;
            border-radius: $border-radius-button;
            position: relative;
            border: $border-light-medium;

            &::before {
              content: "";
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              left: 0.5rem;
              width: 0.1rem;
              height: 0.563rem;
              background: $color-white;
              -webkit-transition: 0.3s;
              transition: 0.3s;
            }

            &::after {
              content: "";
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              left: 0.313rem;
              width: 0.6rem;
              height: 0.6rem;
              background: $color-active;
              border-radius: 90rem;
              transition: 0.3s;
              z-index: 1;
            }
          }

          input:checked+label {
            background: $color-active;
            border: $border-theme-medius;
          }

          input:checked+label::after {
            left: calc(100% - 1rem);
            transform: translateY(-50%);
            background: $background-color;
          }
        }

        .setting-form-input {
          position: relative;

          .parameter {
            position: absolute;
            top: .41rem;
            right: 0.313rem;
            border-left: $border-light-small;
            padding: 0 0.75rem;

          }
        }

        .settings-metabox-description {
          margin-top: 0.625rem !important; // Overwrite common.scss
          font-style: italic;
          color: #72727599;
          font-size: 0.813rem !important; // Overwrite common.scss
          width: 100%;

          b{
            color: #000000b7;
          }

          p {
            margin-bottom: 0.5rem;
          }
        }

        .checkbox-description {
          width: 100%;
          font-style: italic;
          color: #72727599;
          font-size: 0.813rem;
        }

        input,
        textarea,
        select {
          width: 100%;
          border: $border-light-small;
          border-radius: $border-radius-small;
          padding: 0.313rem 0.5rem;
          background: transparent;
          font-size: 0.875rem;
          line-height: 1.5;

          &:focus {
            box-shadow: none;
          }
        }

        .setting-color-picker {
          padding: 0;
        }

        input[type="checkbox"] {
          width: 1rem;
        }

        .setting-file-uploader-class {

          .file-uploader {
            display: flex;
            align-items: end;
          }

          img {
            width: 6rem;
            margin-right: 1rem;
          }
        }

        .settings-calender {

          .rmdp-wrapper {
            margin-bottom: 0.5rem;
          }
        }

        .settings-color-picker-parent-class {
          width: 50%;
        }

        .settings-form-group-radio {
          display: flex;
          flex-wrap: wrap;
          gap: 0 1rem;

          .radio-input-label-wrap {
            margin-bottom: 0.5rem;

            label{
              margin-left:0.3rem;
            }
          }
        }

        .form-group-radio-color {
          display: flex;
          flex-wrap: wrap;

          .settings-radio-color {
            margin: .5rem 1rem .5rem 0;
            width: calc(50% - 1rem);

            .color-palette {
              display: flex;
              align-items: center;
              margin-top: .5rem;

              div {
                width: 25%;
                height: 0.75rem;

              }
            }
          }
        }

        .form-group-radio-select {

          .radioselect-class {
            margin-bottom: 1.5rem;
            padding: 0.6rem 1rem 0.8rem;
            border-radius: $border-radius-small;
            border: $border-light-small;
            position: relative;
            height: 15.625rem;
            overflow: hidden;
            transition: height .4s ease;

            img {
              width: 100%;
              margin-top: 0.5rem;
            }

            .radioselect-overlay-text {
              position: absolute;
              width: 100%;
              height: 100%;
              top: 0;
              left: 0;
              background-color: #795b9d;
              color: $color-white;
              opacity: 0;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: $border-radius-small;

              &:hover {
                opacity: 0.6;
              }
            }

            input {
              position: absolute;
              top: 1.1rem;
              right: .813rem;
              border-radius: .125rem;
              opacity: 0;
              width:1rem;
            }

            input:checked {
              opacity: 1;
              border: none;
            }

            &:hover {
              height: 100%;
            }

            .admin-pro-tag{
              top: 1.25rem;
              right: 1rem;
            }
          }
        }

        .settings-basic-child-wrap {

          .settings-basic-input-child-class {
            margin-bottom: 1rem;

            .setting-form-input-label {
              margin-bottom: 0.5rem;
            }
          }
        }

        .settings-basic-input-class {

          #store-maps {
            position: relative;
            overflow: hidden;

            .mapboxgl-canvas-container {
              touch-action: pinch-zoom;

              .mapboxgl-marker {
                position: absolute;
                top: 0;
                left: 0;
                will-change: transform;
                opacity: 1;
                transition: opacity .2s;
              }
            }

            .mapboxgl-control-container {
              position: absolute;
              width: 100%;
              height: 100%;
              top: 0;

              .mapboxgl-ctrl-top-right {
                background: $color-white;
                width: 50%;
                margin: 3% auto;

                .mapboxgl-ctrl {
                  display: flex;
                  align-items: center;
                  position: relative;
                  flex-direction: column;

                  .mapboxgl-ctrl-geocoder--icon-search {
                    position: absolute;
                    left: 0.2rem;
                    top: 0.475rem;
                    width: 2rem;
                  }

                  input {
                    padding-left: 2rem;
                  }

                  .suggestions-wrapper {
                    .suggestions {
                      background-color: #fff;
                      border-radius: $border-black-small;
                      left: 0;
                      list-style: none;
                      margin: 0;
                      padding: 0;
                      position: absolute;
                      width: 100%;
                      top: 110%;
                      top: calc(100% + 0.375rem);
                      z-index: 1000;
                      overflow: hidden;

                      li {
                        padding: 0.2rem 0.5rem;

                        a {
                          color: #181718;

                          .mapboxgl-ctrl-geocoder--suggestion {
                            padding: 0.5rem;
                          }

                          .mapboxgl-ctrl-geocoder--suggestion-address {
                            text-overflow: ellipsis;
                            overflow: hidden;
                            white-space: nowrap;
                          }
                        }
                      }

                      .active {
                        background-color: #f3f3f3;
                      }
                    }
                  }

                  .mapboxgl-ctrl-geocoder--pin-right {
                    position: absolute;
                    top: 0.5rem;
                    right: 0.5rem;

                    .mapboxgl-ctrl-geocoder--button {
                      position: absolute;
                      background: transparent;
                      right: 0;
                      top: -0.45rem; // For center position
                    }

                    .mapboxgl-ctrl-geocoder--icon-loading {
                      opacity: 0;

                    }
                  }
                }
              }

              .mapboxgl-ctrl-bottom-right {
                position: absolute;
                bottom: 0.5rem;
                right: 0.5rem;

                a {
                  color: $color-active;
                  font-size: 0.75rem;
                  text-decoration: underline;
                }
              }
            }
          }
        }


        .copy-btn {
          width: 2rem;
          height: 2rem;
          box-shadow: 0 0 1rem rgba(0, 0, 0, 0.164);
          padding: 0;
          border-radius: $border-radius-small;
          position: relative;
          background-color: $theme-color;

          &:hover {
            .tool-clip {
              display: block;
            }
          }

          .tool-clip {
            display: none; // Display block for hover
            width: 7rem;
            left: -50%;
            transform: translateX(-50%);

            &.tooltip{
              &::after {
                left: 78%
              }
            }
          }

          .tooltip{
            font-size: 0.625rem;
            position: absolute;
            background: $color-active;
            padding: 0.5rem 0.75rem;
            top: -2rem;
            border-radius: $border-radius-small;
            color: $color-white;

            i {
              padding-right: 0.313rem
            }

            &::after {
              position: absolute;
              content: "";
              bottom: -0.189rem;
              left: 50%;
              transform: translateX(-50%) rotate(45deg);
              width: 0.504rem;
              height: 0.504rem;
              background: $color-active;
            }
          }

          .svgIcon {
            color: $color-white;
          }
        }
      }
    }

    .setting-section-divider {
      margin: 2rem 0;
      padding: 0;
      border-top: 0.05rem solid rgba(82, 44, 129, 0.09);
      position: relative;

      .section-hint {
        text-align: center;
        margin-top: 0.813rem;
      }

      span {
        position: absolute;
        top: -0.063rem;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 0 1rem;
        background: $color-white;
      }
    }

    .conditional-section {
      padding-top: 2.5rem;
      margin-top: 2.5rem;
      border-top: 0.05rem solid rgba(82, 44, 129, 0.09);
    }

    .settings-metabox-description-code {
      padding: .5rem 1rem;
      margin: .5rem 0;
      background: #fdf9fb;
      color: $theme-color;
      border-left: 0.2rem solid $color-active;
    }

    .fromcustomizer-wrapper {
      border: $border-light-medium;
      border-radius: $border-radius-small;
      padding: 1rem;

      input {
        font-size: 0.95rem;
        cursor: pointer;
        width: 100%;

        &:hover,
        &.active,
        &:focus {
          box-shadow:
            0.0rem 0.0rem 0.0rem 0.126rem rgb(255, 255, 255), 0.0rem 0.0rem 0.0rem 0.189rem rgba(33, 33, 33, 0.5) !important; // To overwrite stock manager.scss
        }
      }

      .wrapper-content {
        .label-section {
          margin-bottom: 0.55rem;
        }

        .form-section {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(11.34rem, 1fr));
          width: 100%;
          row-gap: 0.75rem;
          column-gap: 0.75rem;
        }
      }
    }
  }
}

@media screen and (max-width: 61.488rem) {
  .dynamic-fields-wrapper {
    .dynamic-form {
      .form-group {
        flex-direction: column;
        gap: 1rem;

        .settings-form-label,
        .settings-input-content {
          width: 100%;
        }
      }
    }
  }
}

.select-deselect-trigger {
  margin-bottom: 1rem;
}

.default-checkbox {
  input[type=checkbox] {
    margin: 0;
  }
}

.checkbox-list-side-by-side {
  .wrapper {
    .toggle-checkbox-header {
      min-width: 32%;
      display: inline-flex;
      margin-right: 0.945rem;
      position: relative;
      flex-wrap: wrap;
      padding-bottom: 0.8rem;
      z-index: 0;

      .settings-checkbox-description {
        margin-right: 0.5rem;
        padding-top: 0.1rem;
      }

      .default-checkbox {
        margin-right: 0.5rem;

      }
      .admin-pro-tag{
        position: relative; 
        height: fit-content;
      }
    }
  }
}