/**
 * @file
 * Webform form styles.
 */
/**
 * This allows components to be hidden when a JS plugin provides the UI.
 */
html.js .js-webform-visually-hidden, html.js .js-webform-visually-hidden[style*="display: none"] {
  position: absolute !important;
  display: inline !important;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  word-wrap: normal;
}

/**
 * Element states.
 * @see \Drupal\webform\WebformSubmissionConditionsValidator::buildForm
 * @see \Drupal\webform\Utility\WebformElementHelper::fixStatesWrapper
 * @see \Drupal\webform\Plugin\WebformElement\TextFormat::preRenderFixTextFormatStates
 * @see text-format-wrapper.html.twig
 */
:is(.js-form-item, .js-form-submit, .js-form-wrapper).js-webform-states-hidden,
.js-webform-text-format-hidden > .js-text-format-wrapper {
  display: none;
}

/**
 * Description.
 */
.webform-element-description p:first-child {
  margin-block-start: 0;
}
.webform-element-description p:last-child {
  margin-block-end: 0;
}

/**
 * Container inline
 */
.form-item .container-inline {
  margin: 2px 0;
}

/**
 * Issue #2731991: Setting required on radios marks all options required.
 */
:is(.form-checkboxes, .form-radios) .form-required:after {
  display: none;
}

/**
 * Element title inline.
 */
.webform-element--title-inline > label {
  display: inline;
  padding-inline-end: var(--sp0-5);
}

.webform-element--title-inline > div.container-inline {
  display: inline;
}

/**
 * Fieldset title inline.
 * Applies to radios, checkboxes, and buttons. (aka .form-composite)
 * @see \Drupal\webform\Plugin\WebformElement\OptionsBase::prepare
 * @see webform_preprocess_fieldset()
 */
.form-composite.webform-fieldset--title-inline legend {
  float: inline-start;
  margin-block: var(--sp0-25);
  margin-inline: 0 var(--sp0-5);
}

.form-composite.webform-fieldset--title-inline .fieldset-wrapper,
.form-composite.webform-fieldset--title-inline .fieldset-wrapper > div {
  display: inline;
}

/**
 * Checkboxes and radios title inline.
 */
.webform-element--title-inline :is(.form-radios, .form-checkboxes) {
  display: inline;
}

/**
 * Clientside validation errors.

 * @see webform_clientside_validation.ife.css
 */
.webform-submission-form strong.error.form-item--error-message {
  display: block;
}

/**
 * Readonly inputs. (@see .form-disabled)
 * @see https://www.wufoo.com/html5/attributes/21-readonly.html
 */
.webform-readonly input[type=date],
.webform-readonly input[type=datetime-local],
.webform-readonly input[type=email],
.webform-readonly input[type=number],
.webform-readonly input[type=password],
.webform-readonly input[type=search],
.webform-readonly input[type=tel],
.webform-readonly input[type=text],
.webform-readonly input[type=time],
.webform-readonly input[type=url],
.webform-readonly textarea {
  color: var(--color--gray-45);
  border-color: var(--color--gray-70);
  background: var(--color--gray-100);
}

/* Prevent overflows */
.webform-submission-form input,
.webform-submission-form select {
  max-width: calc(100vw - 2.4 * var(--container-padding, var(--sp-m-l)));
}