.dropdown-with-input-section {
  width: 100%;
  background-color: var(--_base-white);

  &:focus-within {
    box-shadow: 0px 0px 0px 2px var(--_gray-100);
  }

  .dropdown-label {
    display: block;
    margin-bottom: 6px;
  }

  .dropdown-input-section {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 0px 12px;
    border-radius: 4px;
    width: 100%;
    align-items: center;
    height: 40px;
    line-height: 40px;
    // outline: 2px solid var(--_base-white);
    border: 1px solid var(--_thm-cs-be-se-3);
    &:focus-within {
      box-shadow: 0px 0px 0px 2px var(--_gray-100);
    }

    .selected-display {
      .selected-item {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        color: var(--_thm-cs-be-se-1);
        .svg_icon {
          vertical-align: middle;
          display: flex;
          svg {
            width: 12px;
            height: 12px;
            cursor: pointer;
            vertical-align: middle;
            g {
              path {
                stroke: var(--_thm-cs-be-se-3);
              }
            }
          }
        }
        &:hover {
          .svg_icon {
            svg {
              g {
                path {
                  stroke: var(--_thm-cs-be-se-1);
                }
              }
            }
          }
        }
        &:hover {
          color: var(--_thm-ty-p1-tt-cr);
        }
      }
      .multi-selected-display {
        display: flex;
        align-items: center;
        gap: 8px;
        .selected-item {
          border: 1px solid var(--_thm-cs-be-se-3);
          border-radius: 4px;
          padding: 2px 4px;
          font-size: 12px;
          .svg_icon {
            vertical-align: middle;
            display: flex;
            svg {
              width: 12px;
              height: 12px;
              cursor: pointer;
              vertical-align: middle;
              g {
                path {
                  stroke: var(--_thm-cs-be-se-3);
                }
              }
            }
          }
          &:hover {
            border: 1px solid var(--_thm-cs-be-se-1);
            .svg_icon {
              svg {
                g {
                  path {
                    stroke: var(--_thm-cs-be-se-1);
                  }
                }
              }
            }
          }
        }
      }
    }

    &:focus-within {
      box-shadow: 0px 0px 0px 3px var(--_gray-100);
    }
    cursor: pointer;
    .selected-display {
      .selected-item {
        display: flex;
        align-items: center;
        gap: 6px;
        img {
          margin-top: 2px;
          border-radius: 50%;
          width: 24px;
          height: 24px;
          object-fit: cover;
        }
      }
    }
    &.visibility_hidden {
      visibility: hidden;
    }
    &:focus-within {
      box-shadow: 0px 0px 0px 3px var(--_gray-100);
    }
    &.w-full {
      width: 100%;
    }

    &.disabled {
      opacity: 0.6;
      pointer-events: none;
      user-select: none;

      input {
        background-color: var(--_thm-cs-be-se-2);
        cursor: not-allowed;
      }
    }

    // chips
    .dropdown-chips {
      display: flex;
      //   flex-wrap: wrap;
      gap: 4px;
      //   margin-bottom: 4px;
      max-width: 88%;
      min-width: 88%;
      overflow: hidden;
      .dropdown-chip {
        background: var(--_thm-cs-be-se-2);
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 12px;
        display: flex;
        align-items: center;
        min-width: 48px;
        max-width: 60px;
        .chip-lable {
          max-width: 80%;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }

        .remove-chip {
          margin-left: 6px;
          cursor: pointer;
          font-weight: bold;
        }
      }

      .dropdown-chip-overflow {
        background-color: #d1d1d1;
        color: #555;
        cursor: default;
      }
    }

    // .input-field {
    //   flex: 1;
    //   font-size: 14px;
    // }
    .readonly-input,
    .dropdown__clear__icon,
    .dropdown__icon {
      transition: transform 0.4s ease-in-out;
      .icon {
        transition: transform 0.4s ease-in-out;
        display: flex;
        // transform: rotate(0deg);
        &:hover {
          svg path {
            stroke: var(--_gray-700);
          }
        }
        svg {
          width: 16px;
          height: 16px;
        }
        // &.up {
        //   transform: rotate(0deg);
        // }
        // &.down {
        //   transform: rotate(180deg);
        // }
        &.up,
        &.down {
          svg {
            width: 18px !important;
            height: 18px !important;
          }
        }
      }
      cursor: pointer;
      .icon svg {
        vertical-align: middle;
      }
      .icon.down svg {
        transform: rotate(180deg);
      }
    }
    .dropdown__clear__icon {
      position: absolute;
      right: 10px;
      .icon {
        display: flex;
        svg {
          width: 16px;
          height: 16px;
        }
        &.up,
        &.down {
          svg {
            width: 18px !important;
            height: 18px !important;
          }
        }
      }
    }

    .dropdown-with-icon {
      width: 100%;
      // pointer-events: none;
      border: none;
      padding: 0;
    }
  }

  .dropdown-menu {
    position: fixed;
    width: 100%;
    background: white;
    border: 1px solid var(--_thm-cs-be-se-3);
    border-radius: 4px;
    max-height: 200px;
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.1);
    z-index: 10;
    // min-width: 240px;
    max-height: 300px;
    display: flex;
    flex-direction: column;
    // margin-left: -6px;
    &.open_dropdown {
      animation: open_dropdown 300ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    &.close_dropdown {
      animation: close_dropdown 300ms cubic-bezier(0.4, 0, 1, 1);
    }
    &.w-full {
      width: 100%;
    }
    .dropdown_template_panel_search {
      background: none;
      padding: 8px;
      border-bottom: 1px solid var(--_thm-cs-be-se-3);
      height: max-content !important;
      position: relative;
      &:hover {
        background: none !important;
      }

      input {
        width: 100%;
        padding-inline: 10px;
        border-radius: 4px;
        border: 1px solid var(--_thm-cs-be-se-3);
        height: 40px;
        &:focus {
          border: 1px solid var(--_gray-300);
        }
      }
      .close_btn {
        position: absolute;
        right: 14px;
        top: 14px;
        z-index: 10;
        padding: 4px;
        border-radius: 2px;
        &:hover {
          background: var(--_gray-100);
        }
      }
    }

    .dropdown_menu_ul {
      min-height: 40px;
      max-height: 200px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 4px;
      &:has(.show_scroll) {
        overflow-y: scroll;
      }
    }
    .empty_message {
      height: 160px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .loading_data {
      height: 160px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      gap: 4px;
      padding: 4px;
      // align-items: center;
      // padding: 24px;
      // font-size: 16px;
      // font-weight: 500;
      // text-align: center;
      // .dots {
      //   display: inline-flex;
      //   width: 20px; /* fixed space so text doesn’t shift */
      //   justify-content: space-between;
      //   align-items: flex-end;
      //   margin-left: 6px;
      //   margin-bottom: -9px;
      // }

      // .dots span {
      //   animation: blink 1.5s infinite;
      //   opacity: 0;
      //   width: 2px;
      //   height: 2px;
      //   border-radius: 50%;
      //   background-color: var(--_gray-700);
      // }

      // .dots span:nth-child(1) {
      //   animation-delay: 0s;
      // }
      // .dots span:nth-child(2) {
      //   animation-delay: 0.3s;
      // }
      // .dots span:nth-child(3) {
      //   animation-delay: 0.6s;
      // }

      // @keyframes blink {
      //   0% {
      //     opacity: 0;
      //   }
      //   50% {
      //     opacity: 1;
      //   }
      //   100% {
      //     opacity: 0;
      //   }
      // }
    }

    .dropdown-opt {
      font-size: 14px;
      cursor: pointer;

      &.no-result {
        color: #aaa;
        cursor: default;
      }
      .dropdown-item {
        width: 100%;
        height: 100%;
        padding: 8px 12px;
        text-align: left;
        display: flex;
        align-items: center;
        gap: 8px;
        // height: auto !important;
        max-height: 52px;
        border-radius: 4px;
        .profile_block {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          overflow: hidden;
          background-color: var(--_thm-cs-be-se-3);
          display: flex;
          justify-content: center;
          align-items: center;
          color: var(--_gray-600);
          font-size: 12px;
          font-weight: 600;
          img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
          }
        }
        &:hover {
          background-color: var(--_primary-25);
          color: var(--_primary-400);
        }

        .item-image {
          // background-image: url("");
          width: 32px;
          height: 32px;
          background-size: 100%;
          background-position: center;
          border-radius: 50%;
          object-fit: cover;
        }
        .item-image-svg {
          display: flex;
          align-items: center;
          justify-content: center;
          background: #dfdfdf;
          margin-right: 8px;
        }

        .dropdown-item-details {
          max-width: 100%;
          // width: 100%;
          .item-name {
            color: var(--_gray-900);
          }
          .item-code {
            color: var(--_gray-600);
          }
        }
      }
      .selected {
        background-color: var(--_gray-100);
        font-weight: normal;
        color: var(--_gray-900);
        .dropdown-item-details {
          width: 70% !important;
        }
        .check_mark {
          margin-left: auto;
          svg path {
            stroke: var(--_gray-900);
          }
        }
      }
    }
    .dropdown-group-li {
      height: auto;
      .group-header {
        height: 40px;
        align-items: center;
        display: flex;
        gap: 8px;
        padding: 4px 8px;
        max-width: 230px;
        background: var(--_gray-50);
        border-radius: 4px;
        margin-bottom: 4px;
        input {
          width: auto;
        }
        .group-header-name {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          .trigger-icon {
            display: flex;
            transform: rotate(0deg);
            transition: all 400ms ease-in;
            &.up {
              transform: rotate(180deg);
              transition: all 400ms ease-in;
            }
          }
        }
      }
      // .input-checkbox {
      //   display: flex;
      //   align-items: center;
      //   cursor: pointer;
      //   font-size: 16px;
      //   user-select: none;

      //   input[type="checkbox"] {
      //     display: none;

      //     &:checked + .checkmark::after {
      //       content: "";
      //       position: absolute;
      //       left: 5px;
      //       top: 1px;
      //       width: 6px;
      //       height: 12px;
      //       border: solid #2196f3;
      //       border-width: 0 2px 2px 0;
      //       transform: rotate(45deg);
      //     }
      //   }

      //   .checkmark {
      //     height: 18px;
      //     width: 18px;
      //     background-color: #eee;
      //     border: 2px solid #ccc;
      //     border-radius: 4px;
      //     margin-right: 10px;
      //     position: relative;
      //     transition: all 0.2s ease;
      //   }

      //   &:hover .checkmark {
      //     background-color: #f0f0f0;
      //   }
      // }

      .dropdown-item {
        height: 40px;
        &:not(:last-child) {
          margin-bottom: 2px;
        }
      }
    }

    .dropdown_selection_actions {
      display: flex;
      align-items: center;
      height: 50px;
      // position: absolute;
      // bottom: 0;
      width: 100%;
      background: #fff;
      border-top: 1px solid var(--_thm-cs-be-se-3);
      .opts_selection_action {
        width: 50%;
        height: 100%;
        /* text-align: center; */
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        .add_selected_options {
          &:hover {
            background-color: var(--_primary-25);
            svg path {
              stroke: var(--_primary-400);
            }
          }
        }
        &:not(:last-child) {
          border-right: 1px solid var(--_thm-cs-be-se-3);
        }
        &.discard_selection {
          &:hover {
            background-color: var(--_gray-50);
          }
        }
        &:hover {
          background-color: var(--_primary-25);
        }
        .svg_icon {
          cursor: pointer;
          position: relative !important;
          background: none !important;
          right: 0px !important;
        }
      }
    }
  }
  .drodown-menu-with-icon-dropdown {
    top: 11px;
  }
}

.icon_with_label_section {
  display: flex;
  gap: 4px;
  cursor: pointer;
  .label_elm {
    color: var(--_primary-400);
    font-size: 14px;
  }
}

.text-ellipsis {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.no_data_found {
  padding: 24px;
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
}

// spinner for dropdown
.spinner_dropdown {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  position: relative;
  animation: rotate 1s linear infinite;
}
.spinner_dropdown::before,
.spinner_dropdown::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 0px;
  border-radius: 50%;
  border: 2px solid var(--_primary-300);
  animation: prixClipFix 2s linear infinite;
}
.spinner_dropdown::after {
  border-color: var(--_primary-500);
  animation:
    prixClipFix 2s linear infinite,
    rotate 0.5s linear infinite reverse;
  inset: 6px;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes prixClipFix {
  0% {
    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
  }
  25% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
  }
  50% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
  }
  75% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  }
  100% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
  }
}

@keyframes open_dropdown {
  0% {
    transform: translateY(-4px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes close_dropdown {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-4px);
    opacity: 0;
  }
}