.section-helper {
  &--skin-preview {
    background-color: var(--wds-section-helper-fill-preview, var(--wds-color-black-700, #edeef2));
    border-color: var(--wds-section-helper-border-preview, var(--wds-color-black-550, #cfd1dc));
  }

  &--size-small {
    padding: var(--wds-section-helper-vertical-padding-small, var(--wds-space-200, 8px)) var(--wds-section-helper-horizontal-padding-small, var(--wds-space-300, 12px));
  }

  &--size-medium#{&}--with-close-btn {
    padding-inline-end: var(--wds-section-helper-close-button-clearance-medium, var(--wds-space-700, 28px));
  }

  &--size-small#{&}--with-close-btn {
    padding-inline-end: var(--wds-section-helper-close-button-clearance-small, var(--wds-space-500, 20px));
  }

  &--has-prefix {
    gap: var(--wds-section-helper-horizontal-margin, var(--wds-space-150, 6px));
  }

  &--border-standard {
    border-radius: var(--wds-section-helper-border-radius, var(--wds-border-radius-200, 4px));
  }

  &__prefix {
    margin-inline-start: calc(var(--wds-section-helper-prefix-offset-margin, 4px) * -1);
  }

  &__content--size-small {
    gap: var(--wds-section-helper-content-gap-small, var(--wds-space-200, 8px));
  }

  & &__title &__text#{&}__text {
    font-size: var(--wds-section-helper-title-font-size, var(--wds-font-size-body-tiny, 12px));
    line-height: var(--wds-section-helper-text-font-line-height, var(--wds-font-line-height-100, 16px));
  }

  &--mobile &__title &__text#{&}__text {
    font-size: var(--wds-font-size-body-small, 14px);
    line-height: var(--wds-font-line-height-body-small, 18px);
  }

  &__actions--size-small {
    gap: var(--wds-section-helper-action-padding-small, var(--wds-space-200, 8px));
  }

  & &__text#{&}__text#{&}__text--weight-thin {
    line-height: var(--wds-section-helper-text-font-line-height, var(--wds-font-line-height-100, 16px));
    font-size: var(--wds-section-helper-text-font-size, var(--wds-space-300, 12px));
  }

  &--mobile &__text#{&}__text#{&}__text--weight-thin {
    font-size: var(--wds-font-size-body-small, 14px);
    line-height: var(--wds-font-line-height-body-small, 18px);
  }

  /*
   * `border(topBottom)` has to outrank `skin(preview)`'s border-color at one class
   * — same ordering constraint as the base sheet — but skin-preview's border
   * color just moved into this theme bundle, which loads after the base sheet
   * entirely. Repeated so border(topBottom) still wins the tie inside this
   * theme too.
   */
  &--border-top-bottom {
    border-left: none;
    border-right: none;
  }
}