/**
 * page container
 */
.form-builder-page-container {
  --vads-color-divider: #a9aeb1;
  --color-shadow: #00000040;

  color: var(--vads-color-base);
  font-family: var(--font-source-sans);
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

/**
 * layout
 */
.form-builder-single-column-content {
  width: 900px;
}

/**
 * links
*/
.form-builder-page-container a {
  text-decoration: underline;
}

.form-builder-page-container a:focus,
.form-builder-page-container a:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--vads-color-base);
  text-decoration: underline;
}

/**
 * headings
 */
.form-builder-page-container h1 {
  font-family: var(--font-family-serif);
  font-size: var(--vads-font-size-heading-level-1);
  line-height: var(--units-6);
}

.form-builder-page-container h2 {
  font-family: var(--font-family-serif);
  font-size: var(--vads-font-size-heading-level-2);
}

.form-builder-page-container h3 {
  font-family: var(--font-family-serif);
  font-size: var(--vads-font-size-heading-level-3);
}

.form-builder-page-container h4 {
  font-family: var(--font-family-serif);
  font-size: var(--vads-font-size-heading-level-4);
}

.form-builder-page-container h5 {
  font-family: var(--font-family-serif);
  font-size: var(--vads-font-size-heading-level-5);
}

.form-builder-page-container h6 {
  font-family: var(--font-family-serif);
  font-size: var(--vads-font-size-heading-level-6);
}

.form-builder-heading-with-label .form-builder-heading-with-label__label {
  font-family: var(--font-family-serif);
  font-size: var(--units-2p5);
  font-weight: var(--font-weight-bold);
  margin-bottom: 0;
}

.form-builder-heading-with-label .form-builder-heading-with-label__heading {
  font-family: var(--font-family-serif);
  font-weight: var(--font-weight-bold);
}

.form-builder-heading-with-label h3.form-builder-heading-with-label__heading {
  font-size: var(--vads-font-size-heading-level-2);
  margin-top: var(--units-1p5);
}

/**
 * font family
 */
.form-builder-page-container .font-family-sans-serif {
  font-family: var(--font-source-sans);
}

.form-builder-page-container .font-family-serif {
  font-family: var(--font-family-serif);
}

/**
 * required fields
 */
.form-builder-page-container .form-item__label.form-required::after,
.form-builder-page-container .fieldset__label.form-required::after {
  color: var(--vads-color-secondary-dark);
  content: "(*Required)";
}

/**
 * form field descriptions/hint text
 */
.form-builder-page-container .form-item__description {
  color: var(--vads-color-gray-medium);
}

/**
 * header
 */
.form-builder-header {
  background-color: var(--va-blue-darkest);
  color: var(--va-white);
  font-family: var(--font-family-serif);
  padding-top: var(--units-1);
}

/**
 * layout container
 */
.form-builder-layout-container {
  margin: var(--units-2p5) var(--units-7);
}

/**
 * title
 */
.form-builder-title {
  margin-bottom: var(--units-1p5);
}

/**
 * subtitle
 */
.form-builder-subtitle {
  font-size: var(--vads-font-size-heading-level-3);
  font-weight: 700;
  line-height: var(--units-3);
  padding: var(--units-1p5);
}

/**
 * breadcrumbs
 */
.form-builder-breadcrumbs {
  margin: var(--units-5) 0;
}

.form-builder-breadcrumbs__list {
  display: flex;
  font-family: var(--font-source-sans);
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.form-builder-breadcrumbs__list-item {
  align-items: center;
  display: flex;
}

.form-builder-breadcrumbs__list-item::after {
  color: #666;
  content: ">";
  font-family: monospace;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.form-builder-breadcrumbs__list-item:last-child {
  font-weight: var(--font-weight-bold);
}

.form-builder-breadcrumbs__list-item:last-child::after {
  content: "";
}

/**
 * banners
 */
.form-builder-banner {
  --banner-icon-continue: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220%200%2024%2024%22%3E%3Cpath d%3D%22M18%208h-1V6c0-2.76-2.24-5-5-5S7%203.24%207%206v2H6c-1.1%200-2%20.9-2%202v10c0%201.1.9%202%202%202h12c1.1%200%202-.9%202-2V10c0-1.1-.9-2-2-2zm-6%209c-1.1%200-2-.9-2-2s.9-2%202-2%202%20.9%202%202-.9%202-2%202zm3.1-9H8.9V6c0-1.71%201.39-3.1%203.1-3.1%201.71%200%203.1%201.39%203.1%203.1v2z%22%2F%3E%3C%2Fsvg%3E");
  --banner-icon-error: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22%3E%3Cpath d%3D%22M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z%22%2F%3E%3C%2Fsvg%3E");
  --banner-icon-info: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22%3E%3Cpath d%3D%22M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z%22%2F%3E%3C%2Fsvg%3E");
  --banner-icon-success: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22%3E%3Cpath d%3D%22M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z%22%2F%3E%3C%2Fsvg%3E");
  --banner-icon-warning: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22%3E%3Cpath d%3D%22M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z%22%2F%3E%3C%2Fsvg%3E");

  border-left-style: solid;
  border-left-width: var(--units-1);
  width: 100%;
}

.form-builder-banner .form-builder-banner__heading {
  font-family: var(--font-family-serif);
  font-size: var(--vads-font-size-heading-level-3);
  margin-top: var(--units-0p5);
}

.form-builder-banner .form-builder-banner__content {
  font-family: var(--font-source-sans);
  padding: var(--units-3) var(--units-5) var(--units-2) var(--units-9);
  position: relative;
}

.form-builder-banner__content::before {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: var(--units-4) var(--units-4);
  content: "";
  display: block;
  height: var(--units-4);
  left: var(--units-3);
  position: absolute;
  width: var(--units-4);
}

.form-builder-banner--continue,
.form-builder-banner--success {
  background: var(--vads-color-success-lighter);
  border-left-color: var(--vads-color-success);
}

.form-builder-banner--continue .form-builder-banner__content::before {
  background-image: var(--banner-icon-continue);
}

.form-builder-banner--success .form-builder-banner__content::before {
  background-image: var(--banner-icon-success);
}

.form-builder-banner--error {
  background: var(--vads-color-error-lighter);
  border-left-color: var(--vads-color-error);
}

.form-builder-banner--error .form-builder-banner__content::before {
  background-image: var(--banner-icon-error);
}

.form-builder-banner--info {
  background: var(--vads-color-info-lighter);
  border-left-color: var(--vads-color-info);
}

.form-builder-banner--info .form-builder-banner__content::before {
  background-image: var(--banner-icon-info);
}

.form-builder-banner--warning {
  background: var(--vads-color-warning-lighter);
  border-left-color: var(--vads-color-warning);
}

.form-builder-banner--warning .form-builder-banner__content::before {
  background-image: var(--banner-icon-warning);
}

@supports ((-webkit-mask: url("")) or (mask: url(""))) {
  .form-builder-banner__content::before {
    background: none var(--vads-color-base);
    content: "";
    mask-image: linear-gradient(transparent, transparent);
    mask-position: center center;
    mask-repeat: no-repeat;
    mask-size: var(--units-4) var(--units-4);
  }

  .form-builder-banner--continue .form-builder-banner__content::before {
    mask-image: var(--banner-icon-continue);
  }

  .form-builder-banner--error .form-builder-banner__content::before {
    mask-image: var(--banner-icon-error);
  }

  .form-builder-banner--info .form-builder-banner__content::before {
    mask-image: var(--banner-icon-info);
  }

  .form-builder-banner--success .form-builder-banner__content::before {
    mask-image: var(--banner-icon-success);
  }

  .form-builder-banner--warning .form-builder-banner__content::before {
    mask-image: var(--banner-icon-warning);
  }
}

/**
 * buttons
 */
/* stylelint-disable-next-line selector-no-qualifying-type */
.form-builder-page-container input[type="submit"],
.form-builder-button,
a.form-builder-button {
  border-radius: var(--units-0p5);
  cursor: pointer;
  display: inline-block;
  font-family: var(--font-source-sans);
  font-weight: var(--font-weight-bold);
  padding: var(--units-1p5) var(--units-2p5);
  text-decoration: none;
  transition: none;
}

/* stylelint-disable-next-line selector-no-qualifying-type */
.form-builder-page-container input[type="submit"].button--primary,
.form-builder-button--primary,
.form-builder-button--primary:focus,
a.form-builder-button--primary,
a.form-builder-button--primary:focus {
  background: var(--vads-color-primary);
  color: var(--vads-button-color-text-primary-on-light);
  text-decoration: none;
}

/* stylelint-disable-next-line selector-no-qualifying-type */
.form-builder-page-container input[type="submit"].button--primary:hover,
.form-builder-button--primary:hover,
a.form-builder-button--primary:hover {
  background: var(--vads-color-primary-dark);
  color: var(--vads-button-color-text-primary-on-light);
  text-decoration: none;
}

/* stylelint-disable-next-line selector-no-qualifying-type */
.form-builder-page-container input[type="submit"].button--secondary,
.form-builder-button--secondary,
.form-builder-button--secondary:focus,
a.form-builder-button--secondary,
a.form-builder-button--secondary:focus {
  background: rgba(0, 0, 0, 0);
  border: var(--units-0p25) solid var(--vads-color-primary);
  color: var(--vads-color-primary);
  text-decoration: none;
}

/* stylelint-disable-next-line selector-no-qualifying-type */
.form-builder-page-container input[type="submit"].button--secondary:hover,
.form-builder-button--secondary:hover,
a.form-builder-button--secondary:hover {
  background: #dce4ef; /*secondary-button hover color missing from tokens*/
  color: var(--vads-color-primary);
  text-decoration: none;
}

/**
 * button group
 */
.form-builder-button-group {
  display: flex;
  gap: var(--units-1p5);
  margin-top: var(--units-4);
}

/**
 * details (accordion)
 */
.form-builder-page-container details {
  border: 0;
  box-shadow: none;
  margin-bottom: var(--units-1);
}

/* stylelint-disable-next-line selector-no-qualifying-type */
.form-builder-page-container details[open] {
  margin-bottom: var(--units-4);
}

.form-builder-page-container details summary {
  background: var(--vads-color-base-lightest);
  cursor: pointer;
}

/* stylelint-disable-next-line selector-no-qualifying-type */
.form-builder-page-container details[open] summary {
  margin-bottom: var(--units-2);
}

/**
 * misc.
 */
.form-builder-hint-text {
  color: var(--vads-color-gray-medium);
}
