$experimental-dark-fill: var(
  --wds-section-helper-fill-experimental-dark,
  var(--wds-color-fill-standard-primary-active, #E0E7FF)
) !default;
$experimental-dark-border: var(
  --wds-section-helper-border-experimental-dark,
  var(--wds-button-fill-standard-primary, var(--wds-color-blue-150, #3C67FF))
) !default;

.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-500, #212328));
  }

  &--skin-premium {
    background-color: var(--wds-section-helper-fill-premium, var(--wds-color-blue-500, #212328));
  }

  &--skin-preview {
    background-color: var(--wds-section-helper-fill-preview, var(--wds-color-black-750, #2D2D2E));
    border-color: var(--wds-section-helper-border-preview, var(--wds-color-black-600, #454544));
  }

  &--skin-experimental-dark {
    background-color: $experimental-dark-fill;
    border-color: $experimental-dark-border;
  }

  &--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-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-800, 32px));
  }

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

  &--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--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-tiny, 12px));
    line-height: var(--wds-section-helper-text-font-line-height, var(--wds-font-line-height-body-tiny, 16px));
    font-weight: var(--wds-section-helper-title-font-weight, var(--wds-font-weight-semi-bold, 600));
  }

  &--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));
  }

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

  & &__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;
  }
}