.field:has(input[type="checkbox"]) {
  flex-direction: row;
  gap: 1rem;
}

input[type="checkbox"] {
  cursor: pointer;
  max-height: 1rem;
  max-width: 1rem;
  min-height: 1rem;
  min-width: 1rem;
}

.field .form-input[type="file"] {
  border: unset;
  box-shadow: unset;
  width: fit-content;
  padding: 0;
  margin: 0.5rem 0;

  &::file-selector-button {
    background-color: var(--light-gray);
    border: none;
    border-radius: var(--border-radius);
    color: var(--ink);
    cursor: pointer;
    line-height: 1rem;
    outline: none;
    padding: 0.5rem 1rem;
    transition: 0.4s ease-in-out;
    width: fit-content;
  }

  &:hover::file-selector-button {
    background-color: var(--theme-color);
    color: var(--pure-white);
  }

  &:active::file-selector-button {
    background-color: var(--theme-color-darker);
    color: var(--pure-white);
  }
}

.textarea-autogrow {
  display: inline-flex;
  width: 100%;

  textarea.form-input {
    border: 1px solid var(--light-gray);
    border-radius: var(--border-radius);
    font-family: var(--font);
    min-height: 2rem;
    height: 2rem;
    line-height: 1.5rem;
    max-height: 128px; /* Should not be changed without changing the JS (form#autogrowInput) */
    outline: none;
    overflow: hidden;
    padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
    resize: none !important;
    width: 100%;
  }

  /*Default is one line*/

  .form-input.input-m { /*Three lines*/
    min-height: 5rem;
  }

  .form-input.input-l { /*Five lines*/
    min-height: 8rem;
  }
}

.textarea--expand {
  .form-input {
    resize: vertical;
    min-height: 80px; /* rem should not be used for heights or widths, these things should not change with font-size */
    max-height: unset;
    overflow: hidden; /* Required for resize property to work */
  }
}

/* Merge into one default list class */

.fields-row {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  width: 100%;

  & > .field {
    flex: 1;
    width: 100%;
  }
}

/*.fields-list {*/
/*  !*margin-top: 1rem;*!*/
/*  .inline-field {*/
/*    border-top: 1px solid var(--light-gray);*/
/*    padding-top: 1rem;*/
/*  }*/
/*}*/

p.caption, summary.caption {
  color: var(--ink-gray);
  font-size: 0.875rem;
}

details.read-more.caption {
  margin: 0;
  summary span {
    font-weight: unset;
  }
}

p {
  .left {
    text-align: left;
  }
}

/* Use <mark> to highlight / emphasize a certain part of body text. */

mark {
  background-color: unset;
  font-weight: var(--font-weight-semibold);

  &.success {
    color: var(--success);
  }

  &.danger {
    color: var(--danger);
  }
}

.field {
  &.audio-input {
    /*background-color: var(--off-white);*/
  }
}

/*Different field types*/

.field.checkbox-field {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.5rem;

  .form-label {
    color: var(--ink);
    font-weight: unset;

    a {
      font-weight: 600;
    }
  }

  @media screen and (max-width: 768px) {
    /* var(--screen-md) */
    border-left: 2px solid var(--light-gray);
    padding-left: 0.5rem;
  }
}

/* Use global dropdown arrow instead of default HTML arrow */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("/assets/icons/down-c2a5f89a.svg");
  background-position-x: calc(100% - 1rem);
  background-position-y: center;
  background-repeat: no-repeat;
  background-size: 0.75rem;
}

/* SELECT FIELD (Do not change) */

.field.select-field {
  background-color: var(--off-white);
  border: 1px solid var(--light-gray);
  border-radius: 0.5rem;
  display: inline-flex;
  flex-wrap: nowrap;
  overflow: hidden;
  width: fit-content;

  &.select--h {
    flex-direction: row;
    height: 2rem;
    gap: 0;

    &.select--fill {
      width: 100%;
    }
  }

  &.select--v {
    flex-direction: column;
    height: fit-content;
    margin-top: 0;
  }

  &.select__square--s label {
    min-height: 3rem;
    min-width: 3rem;
  }

  .form-label {
    height: 100%;
  }

  .form-label {
    height: 100%;
  }

  input[type="radio"] {
    display: none;

    & + label {
      align-items: center;
      color: var(--ink-gray);
      cursor: pointer;
      display: inline-flex;
      flex: 1 1 0px;
      font-weight: 600;
      font-size: 0.875rem;
      justify-content: center;
      padding: 0.5rem;
      text-transform: capitalize;
      transition: 0.4s ease-in-out;
      white-space: nowrap;

      &:hover {
        color: var(--theme-color-darker);
      }
    }

    &:checked + label {
      background-color: var(--theme-color-darker);
      box-shadow: inset -2px 4px 4px rgba(51, 51, 51, 0.25);
      color: var(--theme-complementary-color);
    }
  }

  &.select--h {
    input[type="radio"] + label {
      padding: 0.6rem;
    }

    input:not(:last-of-type) + label {
      border-right: 1px solid var(--light-gray);
    }
  }

  @media screen and (max-width: 768px) {
    /* var(--screen-md) */
    width: 100%;
  }

  @media screen and (max-width: 576px) {
    /* var(--screen-sm) */
    overflow-x: scroll;

    &::-webkit-scrollbar {
      max-height: 0 !important;
    }

    input[type="radio"] + label {
      font-size: 0.75rem;
      padding: 0 0.5rem;
    }
  }
}

.form-section.form-section-datetime-duration {
  .time-duration {
    background-color: var(--theme-tenth-opacity-color);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    transition: 0.4s ease-in-out;
    width: fit-content;

    &:has(span#datetime-duration:empty) {
      opacity: 0;
      visibility: hidden;
    }

    &:has(span#datetime-duration:not(:empty)) {
      opacity: 1;
      visibility: visible;
    }
  }
}

/* Password reveal input using BEM methodology */
.password-field {
  position: relative;
  width: 100%;
}

.password-field__input {
  padding-right: 2.5rem !important; /* Create space for both the tooltip and reveal button */
}

.password-field__toggle-button {
  background: transparent;
  border: none;
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--ink-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  z-index: 1; 
}

.password-field__toggle-button:hover {
  color: var(--theme-color);
}

.password-field__icon--hide {
  display: none;
}

.password-field__input[type="text"] ~ .password-field__toggle-button .password-field__icon--show {
  display: none;
}

.password-field__input[type="text"] ~ .password-field__toggle-button .password-field__icon--hide {
  display: block;
}

/* Tooltip specifically for password field - BEM methodology */
.password-field__tooltip {
  position: absolute;
  top: 50%;
  right: 2.5rem; /* Position it to the left of the reveal button */
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  z-index: 1;
}

.password-field__tooltip-icon {
  height: 1rem;
  width: 1rem;
}

/* Keep old styles for backward compatibility */
.input-with-icon {
  position: relative;
  width: 100%;
}

.input-with-icon .icon-button {
  background: transparent;
  border: none;
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--ink-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
}

.input-with-icon .icon-button:hover {
  color: var(--theme-color);
}

.input-with-icon .icon-button .hide-password {
  display: none;
}

.input-with-icon .form-input[type="text"] + .icon-button .show-password {
  display: none;
}

.input-with-icon .form-input[type="text"] + .icon-button .hide-password {
  display: block;
}