/* INPUTS */
/* COMMON */

.form-control,
.form-select {
  background-color: var(--bg_3_lvl);
  color: var(--text_primary);
  border: 1px solid var(--strokes);

  &:not(
      .form-select-sm,
      textarea,
      .tagify,
      .tagify__input,
      .nutrition_inp[readonly]
    ) {
    height: 48px;
  }
  &.form-select-sm {
    height: 40px;
  }
  &:focus {
    background: var(--bg_3_lvl);
    color: var(--text_primary);
  }

  &:disabled {
    color: var(--text_secondary);
    background: var(--bg_1_lvl);
  }
}
.form-control-plaintext {
  color: var(--text-primary);
}
.input-group-text {
  line-height: 2rem;
  background: var(--bg_3_lvl);
  color: var(--text_secondary);
}
input.search {
  padding-left: 40px; /* Creates space for the icon */
  color: var(--text_primary);
}
.search-input-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 400px;
}
.search-icon {
  position: absolute;
  left: 12px; /* Adjust icon positioning */
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  fill: var(--text_primary);
  pointer-events: none; /* Prevents interaction */
}
.tagify {
  --tags-border-color: var(--primary-color);
  min-height: 48px;
  line-height: 2rem;
  padding: 5px;
}
.tagify.recipe_step,
.tagify.meal_plan_prep_step {
  line-height: normal;
}
.tagify__input {
  line-height: 0;
  padding: 0;
}

.tagify__input::before,
.tagify__input:focus:empty::before {
  color: var(--text_secondary);
}

.search-tagify-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.tagify-search-icon {
  position: absolute;
  left: 12px; /* Adjust positioning as needed */
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  fill: var(--text_primary);
  pointer-events: none; /* Prevents click interference */
  z-index: 10; /* Ensures icon stays above the Tagify input */
}
.prepStepTagify .tagify__tag {
  background: var(--bg_3_lvl);
}

.tagify__tag > div {
  color: var(--text_secondary);
}
.prepsteptagifyreadonly .tagify__tag > div {
  color: var(--text_primary);
}
.tagify--select .tagify__tag__removeBtn {
  display: none;
}
#readonly_tag_view tag div {
  color: var(--text-primary);
  background-color: var(--bg_3_lvl);
}
.form-group label {
  margin-bottom: 4px;
}

.form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.cssV2 {
  /* INPUTS */
  input[type="text"] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 48px;
    padding: 10px 12px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 4px;
    -ms-flex-item-align: stretch;
    align-self: stretch;

    border-radius: var(--Corner-radius-S, 4px);

    /* Input field inner shadow */
    -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08) inset;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08) inset;

    color: var(--text_primary, #202020);
  }

  input[type="tel"],
  input[type="number"] {
    text-align: center;
  }

  /* TAGIFY */
  .tagify--select:not(.sm) {
    height: 48px !important;
  }
  .tagify--select:not(.sm) .tagify__input {
    margin: 8px;
  }

  .tagify--select .tagify__tag__removeBtn {
    display: none;
  }

  /* MISC */
  .draggable_ingredient {
    padding: 10px;
    background-color: var(--Grey-20);
    border-radius: 8px;
    border: 1px solid var(--Stroke-dark);
    margin-bottom: 10px;
    cursor: move;
  }

  .tagify__input::before {
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }

  .cooking_mode_step_area span {
    text-align: center;
  }
}
/* ingredient autocomplete */
.autcomplete_options {
  margin-top: 30px;
  margin-left: -65px;
}
.tagify__dropdown__item {
  color: var(--text-dark);
}

.tagify__dropdown__item--active {
  background-color: #fafafa !important;
  color: var(--primary-color) !important;
}
.dropdown-menu {
  background: var(--bg_3_lvl);

  .dropdown-item {
    color: var(--text_primary);
    background: transparent;
    &:hover {
      background: var(--text_secondary);
      color: var(--text_inverse);
    }
  }
}
.offcanvas .dropdown-menu {
  background: var(--bg_1_lvl);
}
.nutrition_inp[readonly] {
  border: none;
}