.section-helper {
  padding: var(--wds-section-helper-vertical-padding-medium, var(--wds-space-400, 16px)) var(--wds-section-helper-horizontal-padding-medium, var(--wds-space-400, 16px));

  &--skin-standard {
    background-color: var(--wds-section-helper-fill-standard, var(--wds-color-blue-600, #f5f7ff));
    border-color: var(--wds-section-helper-border-standard, var(--wds-color-blue-300, #acbeff));
  }

  &--skin-warning {
    background-color: var(--wds-section-helper-fill-warning, var(--wds-color-yellow-600, #fef6ed));
  }

  &--skin-danger {
    background-color: var(--wds-section-helper-fill-danger, var(--wds-color-red-600, #fcebeb));
  }

  &--skin-success {
    background-color: var(--wds-section-helper-fill-success, var(--wds-color-green-500, #effae5));
    border-color: var(--wds-section-helper-border-success, var(--wds-color-green-200, #97c693));
  }

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

  &--skin-experimental-dark {
    border-color: var(--wds-section-helper-border-experimental-dark, var(--wds-color-black-300, #525150));
  }

  &--size-medium {
    padding: var(--wds-section-helper-vertical-padding-medium, var(--wds-space-400, 16px)) var(--wds-section-helper-horizontal-padding-medium, var(--wds-space-400, 16px));
  }

  &--size-small {
    padding: var(--wds-section-helper-vertical-padding-small, var(--wds-space-400, 16px)) var(--wds-section-helper-horizontal-padding-medium, var(--wds-space-400, 16px));
    padding-inline-start: var(--wds-section-helper-horizontal-padding-small, var(--wds-space-300, 12px));
  }

  &--size-tiny {
    padding: var(--wds-space-200, 8px) var(--wds-space-300, 12px);
  }

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

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

  &--with-close-btn &__content {
    padding-inline-end: var(--wds-space-400, 16px);
  }

  &--size-tiny#{&}--with-close-btn {
    padding-inline-end: var(--wds-space-700, 28px);
  }

  &--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-600, 12px));
  }

  &__close--size-small {
    top: var(--wds-section-helper-close-button-inset-small, var(--wds-space-100, 4px));
    right: var(--wds-section-helper-close-button-inset-small, var(--wds-space-100, 4px));
  }

  &__close--size-medium {
    top: var(--wds-section-helper-close-button-inset-medium, var(--wds-space-100, 4px));
    right: var(--wds-section-helper-close-button-inset-medium, var(--wds-space-100, 4px));
  }

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

  &__text-container,
  &__title {
    display: flex;
    flex-direction: column;
  }

  &__content#{&}__content--layout-horizontal {
    gap: 0;
  }

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

  &__content--size-medium {
    gap: var(--wds-section-helper-content-gap-medium, var(--wds-space-500, 20px));
  }

  & &__title &__text#{&}__text {
    font-size: var(--wds-section-helper-title-font-size, var(--wds-font-size-body-small, 14px));
    line-height: var(--wds-font-line-height-body-small, 18px);
    font-weight: var(--wds-section-helper-title-font-weight, var(--wds-font-weight-semi-bold, 600));
  }

  &__actions--layout-horizontal {
    flex-direction: row;
    padding-inline-start: var(--wds-space-400, 16px);
  }

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

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

  &__actions--size-tiny#{&}__actions--layout-horizontal {
    padding-inline-start: 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-body-tiny, 16px));
    font-size: var(--wds-section-helper-text-font-size, var(--wds-font-size-body-tiny, 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;
  }
}