@use "../../../00-base/01-helpers" as *;
@use "../../../01-atoms/03-lists/list--ul/list--helpers" as *;

////////////////////////////////////////////////////////////////////////////////
// *
// * Forms
// *
////////////////////////////////////////////////////////////////////////////////

// * Styling
// =============================================================================

// Types of input:
// email, number, password, search, tel, text, url, color, date, datetime,
// datatime-local, month, time, week

.form__element {
  position: relative; // so tooltip can be positioned, if there is one
  margin-bottom: var(--gap-md);
  width: 100%;

  .field-suffix,
  .admin-link {
    display: block;
  }

  .admin-link {
    margin-top: var(--gap-xs);
  }
}

.form__element__root {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
}

.form__element__prefix,
.form__element__suffix {
  flex: 0 0 auto;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

// ** inline rendering of items in a form__element

.form__element .container-inline {
  display: flex;
  flex-wrap: wrap;
  width: 100%;

  .label {
    margin-right: var(--gap-xs);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
  }

  div {
    flex: 1; // shrink & basis 0, grow 1
    padding-left: var(--gap-xs);

    &:first-child {
      padding-left: 0;
    }
  }

  // Descriptions and help text can be made full size
  .description {
    flex: 1 0 100%;
    padding-left: 0;
  }

  // Tooltips should shrink, only need space for icon
  [data-drupal-field-elements="date-time"] + .description {
    flex: 0 1 0; // grow & basis 0, shrink 1
    padding-left: var(--gap-xs);
  }
}

// ** Tooltip rendering

.form__element__tooltip,
.ui-widget .form__element__tooltip {
  position: absolute;
  right: 0;
  top: 0;
}

.form__element__tooltip__button,
.ui-widget .form__element__tooltip__button {
  display: block;
  cursor: pointer;
  width: var(--gap-md);
  height: var(--gap-md);
  padding: 0;
  margin: 0;
  border: 0 none;
  border-radius: var(--gap-xs);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-base);
  text-align: center;
  color: hsl(var(--clr-white));
  background-color: hsl(var(--clr-link));
}

.form__element__tooltip__message,
.ui-widget .form__element__tooltip__message {
  position: absolute;
  z-index: 1;
  top: rem(25);
  right: rem(-12);
  width: rem(250);
  padding: rem(10);
  border: rem(2) solid hsl(var(--clr-link));
  border-radius: rem(5);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: hsl(var(--clr-base));
  background-color: hsl(var(--clr-white));
  pointer-events: none;
  visibility: hidden;
  text-transform: none;

  &::before,
  &::after {
    content: "";
    position: absolute;
    right: rem(10);
    display: block;
  }

  &::before {
    top: rem(-20);
    border-top: rem(10) solid transparent;
    border-right: rem(10) solid transparent;
    border-bottom: rem(10) solid hsl(var(--clr-link));
    border-left: rem(10) solid transparent;
  }

  &::after {
    top: rem(-17);
    border-top: rem(10) solid transparent;
    border-right: rem(10) solid transparent;
    border-bottom: rem(10) solid hsl(var(--clr-white));
    border-left: rem(10) solid transparent;
  }

  &.is-visible {
    visibility: visible;
  }
}

// * Errors
// =============================================================================

// these styles are set in _form-label.scss, _input.scss
// and the various other form elements css files

// * Hints & description
// =============================================================================

form .description,
.form__element__description,
.password-suggestions,
.webform-component--mandatory-fields p {
  display: block;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  margin-top: var(--gap-xxs);
}

.password-suggestions {
  ul {
    overflow: hidden; // fix overlap bullets with floating elements
    @include list((
      type: "unsorted"
    ));

    > li {
      margin-top: var(--gap-xxs);
      padding-left: rem(12);

      &::before {
        top: rem(8);
        font-size: rem(4);
      }
    }
  }
}

// * Captcha badge
// =============================================================================

.grecaptcha-badge {
  @include z-index(mobile-nav); // display over mobile menu
}
