fieldset.pcss.css

/**
 * @file
 * Fieldset.
 */

@import "../base/media-queries.pcss.css";

.fieldset {
  min-width: 0;
  margin-block: var(--sp1);
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-block: 0;
  padding-inline-start: 0;
  padding-inline-end: 0;
  color: inherit;
  border: solid 2px var(--color--gray-45);
  border-radius: var(--border-radius);
  background-color: var(--color--white);
}

.fieldset--group {
  width: 100%;
  color: inherit;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.fieldset__legend {
  float: left; /* Prevent sticking out of top of fieldset. */
  width: 100%;
  color: inherit;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  background-color: var(--color--gray-45);
  font-size: var(--font-size-l);
  font-weight: 700;
  line-height: var(--line-height-base);

  & + * {
    clear: left;
  }

  & .fieldset__label {
    &.form-required {
      &::after {
        background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A");
      }
    }
  }
}

.fieldset__legend--composite {
  margin-block-start: 2px;
  color: inherit;
}

.fieldset__legend--invisible {
  margin: 0;
}

.fieldset__legend--group {
  color: inherit;
}

.fieldset__label {
  display: block;
  padding-block: var(--sp0-5);
  padding-inline-start: var(--sp1);
  padding-inline-end: var(--sp1);
  color: var(--color--white);
  line-height: var(--line-height-s);
}

.fieldset__label.is-disabled {
  color: var(--color-text-neutral-soft);
}

.fieldset__description {
  margin-block: var(--sp0-5);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-s);
}

.fieldset__description.is-disabled {
  color: var(--input--disabled-fg-color);
}

.fieldset__error-message {
  margin-block: var(--sp0-5);
  padding-inline-start: var(--sp1-5);
  color: var(--color--red);
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E33F1E' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left top; /* LTR */
  background-size: var(--sp1) var(--sp1);
  font-size: var(--font-size-s);
  line-height: var(--line-height-s);

  @media screen and (-ms-high-contrast: active) {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
  }
}

[dir="rtl"] .fieldset__error-message {
  background-position: left top;
}

.fieldset__wrapper {
  margin-block-start: 0;
  padding-block: var(--sp);
  padding-inline: var(--sp);
}

.fieldset--group .fieldset__legend--visible ~ .fieldset__wrapper {
  border: solid 2px var(--color--gray-45);
  border-bottom-right-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
}

.fieldset__wrapper--group {
  margin-block: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

.fieldset__wrapper > .container-inline {
  padding-block: 0;
  padding-inline-start: 0;
  padding-inline-end: 0;
}