input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
select {
  height: 56px;
  --input-border: var(--border-primary);
  border: 1px solid var(--input-border);
  background-color: transparent;
  color: var(--text-primary);
  padding: 16px 12px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;

  &::placeholder {
    color: var(--color-disabled);
  }

  &:focus {
    outline: 3px solid var(--input-border);
  }

  &[aria-invalid="true"] {
    --input-border: var(--border-error);
  }
}

textarea {
  --input-border: var(--border-primary);
  border: 1px solid var(--input-border);
  background-color: transparent;
  color: var(--text-primary);
  padding: 12px;
  border-radius: 4px;

  &::placeholder {
    color: var(--color-disabled);
  }

  &:focus {
    outline: 3px solid var(--input-border);
  }

  &[aria-invalid="true"] {
    --input-border: var(--border-error);
  }
}

select {
  appearance: base-select;

  &::picker-icon {
    content: "";
    width: 24px;
    height: 24px;
    background-color: var(--text-primary);
    mask-image: url("/modules/custom/ui_icons_boxicons/node_modules/boxicons/svg/regular/bx-chevron-down.svg");
    mask-size: contain;
  }
}

input[type="radio"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;

  &::before {
    content: "";
    width: 8px;
    height: 8px;
    background-color: var(--bg-primary);
    border-radius: 50%;
    display: none;
  }

  &:checked {
    background-color: var(--border-secondary);

    &::before {
      display: block;
    }
  }
}

input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-secondary);

  &::before {
    content: "";
    width: 18px;
    height: 18px;
    background-color: var(--text-primary);
    mask-image: url("/modules/custom/ui_icons_boxicons/node_modules/boxicons/svg/regular/bx-check.svg");
    mask-size: contain;
    display: none;
  }

  &:checked {
    background-color: var(--border-secondary);
    &::before {
      display: block;
    }
  }
}

/* Webforms specific style */
.webform-submission-form {
  & label {
    & a {
      color: var(--link-primary);
    }
  }

  & label:not(.option),
  & legend {
    margin-bottom: 8px;

    &.form-required::after,
    &:has(.form-required)::after {
      content: "*";
    }
  }

  & .ajax-progress-throbber {
    display: none !important;
  }
}

.form-item {
  min-width: 0;
}

.form-item--error-message {
  color: var(--text-error);
  font-size: 12px;
}

fieldset.error .fieldset-wrapper > div:first-child:not([class]) {
  color: var(--text-error);
  font-size: 12px;
  margin-bottom: 8px;
}

.form-item:has(
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="url"],
  input[type="search"],
  input[type="tel"],
  select,
  textarea
) {
  display: flex;
  flex-direction: column;

  & .form-item--error-message {
    margin-top: 8px;
  }

  & .webform-element-description {
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: 12px;

    & a {
      color: var(--link-primary);
    }
  }
}

.form-type-radio {
  display: flex;
  align-items: start;
  gap: 12px;

  & input[type="radio"] {
    margin-top: 3px;
    margin-bottom: 3px;
  }
}

.form-type-checkbox {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 8px 12px;

  & .form-item--error-message {
    flex-basis: 100%;
  }

  & input[type="checkbox"] {
    margin-top: 3px;
    margin-bottom: 3px;
  }
}