$line-height: var(--wds-section-helper-text-font-line-height, var(--wds-font-line-height-200, 18px));
$font-size: var(--wds-section-helper-text-font-size, var(--wds-font-size-300, 14px));

.section-helper {
  position: relative;
  border: 1px solid;
  padding: var(--wds-section-helper-vertical-padding-medium, var(--wds-space-300, 18px))
    var(--wds-section-helper-horizontal-padding-medium, var(--wds-space-400, 24px));
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;

  &--skin-warning {
    background-color: var(
      --wds-section-helper-fill-warning, var(--wds-color-fill-surface-warning, var(--wsr-color-Y50, #fff0d1)));
    border-color: var(
      --wds-color-border-warning-primary,
      var(--wsr-color-Y10, #ffb700)
    );
  }

  &--skin-standard {
    background-color: var(
      --wds-section-helper-fill-standard, var(--wds-color-fill-surface-standard, var(--wsr-color-B50, #e7f0ff)));
    border-color: var(
      --wds-section-helper-border-standard, var(--wds-color-border-standard-primary, var(--wsr-color-B30, #a8caff)));
  }

  &--skin-danger {
    background-color: var(
      --wds-section-helper-fill-danger, var(--wds-color-fill-surface-destructive, var(--wsr-color-R50, #fde3e1)));
    border-color: var(
      --wds-color-border-destructive-primary,
      var(--wsr-color-R30, #f69891)
    );
  }

  &--skin-success {
    background-color: var(
      --wds-section-helper-fill-success, var(--wds-color-fill-surface-success, var(--wsr-color-G50, #e1f4eb)));
    border-color: var(
      --wds-section-helper-border-success, var(--wds-color-border-success-primary, var(--wsr-color-G30, #87cea5)));
  }

  &--skin-premium {
    background-color: var(
      --wds-section-helper-fill-premium, var(--wds-color-fill-surface-premium, var(--wsr-color-P50, #f1e0f9)));
    border-color: var(
      --wds-color-border-premium-primary,
      var(--wsr-color-P30, #cf8cf1)
    );
  }

  &--skin-preview {
    background-color: var(
      --wds-section-helper-fill-preview, var(--wds-color-fill-surface-neutral, var(--wsr-color-D70, #eceff3)));
    border-color: var(
      --wds-section-helper-border-preview, var(--wds-color-border-dark-primary, var(--wsr-color-D50, #acafc4)));
  }

  &--skin-experimental-dark {
    background-color: var(
      --wds-section-helper-fill-experimental-dark, var(--wds-color-fill-dark-primary, var(--wsr-color-D10, #000624)));
    border-color: var(
      --wds-section-helper-border-experimental-dark, var(--wds-color-fill-dark-primary, var(--wsr-color-D10, #000624)));
  }

  /* sizes */
  &--size-medium {
    padding: var(--wds-section-helper-vertical-padding-medium, var(--wds-space-300, 18px))
      var(--wds-section-helper-horizontal-padding-medium, var(--wds-space-400, 24px));
  }

  &--size-small {
    padding: var(--wds-section-helper-vertical-padding-small, var(--wds-space-150, 9px))
      var(--wds-section-helper-horizontal-padding-small, var(--wds-space-200, 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-600, 36px));
  }

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

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

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

  &--has-prefix &__content {
    align-self: center;
  }

  /* borders */
  &--border-standard {
    border-radius: var(--wds-section-helper-border-radius, var(--wds-border-radius-300, 6px));
  }

  &--border-top-bottom {
    border-left: none;
    border-right: none;
  }

  /* close button */
  &__close {
    position: absolute;
  }

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

  &__close--size-tiny {
    top: var(--wds-space-100, 4px);
    right: var(--wds-space-100, 4px);
  }

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

  :global([dir='rtl']) &__close {
    left: var(--wds-space-100, 6px);
    right: unset;
  }

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

  &__prefix svg {
    /* svg is inline element and inherits line-height and etc from parent */
    /* https://stackoverflow.com/questions/42529976/auto-height-of-div-doesnt-adhere-to-height-of-its-svg-icon-child */
    display: block;
  }

  /* content */
  &__content {
    display: flex;
    flex-grow: 1;
  }

  &__content--layout-vertical {
    flex-direction: column;
    align-items: flex-start;
  }

  &__content--layout-horizontal {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  &__content--size-tiny {
    gap: var(--wds-space-200, 8px);
  }

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

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

  &__text-container {
    max-width: 540px;
  }

  &--full-width &__content {
    min-width: 0;
  }

  &--full-width &__text-container,
  &--full-width &__title {
    max-width: 100%;
  }

  &__title {
    max-width: 420px;
    margin-bottom: var(--wds-space-100, 6px);
  }

  /*
   * doubled: dropping this re-ties Text's compiled `.root:weight(bold):size(small)`,
   * and the title silently reverts to Text's font-size/weight once Text migrates off Stylable
   */
  & &__title &__text#{&}__text {
    font-size: var(--wds-section-helper-title-font-size, var(--wds-font-size-body-small, 14px));
    line-height: #{$line-height};
    font-weight: var(--wds-section-helper-title-font-weight, var(--wds-font-weight-bold, 700));
  }

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

  &__actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  &__actions--layout-horizontal {
    flex-direction: row-reverse;
  }

  &__actions--size-tiny {
    gap: var(--wds-space-200, 8px);
  }

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

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

  &__action {
    flex-shrink: 0;
  }

  &__secondary-action {
    flex-shrink: 0;
  }

  /*
   * Was `.text:weight(thin):size(small)`, keyed off `Text`'s own state classes.
   * Every `Text` here is `size="small"`, so only the weight distinguishes the
   * body copy from the title, and the slot carries that itself now.
   *
   * doubled: restoring only the original (0,3,0) re-ties Text's compiled
   * `.root:weight(thin):size(small)`, and the body copy silently reverts to
   * Text's size/weight once Text migrates off Stylable. The extra slot
   * repetition moves this to (0,4,0), permanently outranking Text.
   */
  & &__text#{&}__text#{&}__text--weight-thin {
    line-height: #{$line-height};
    font-size: #{$font-size};
  }

  &--size-tiny &__text#{&}__text#{&}__text--weight-thin {
    line-height: var(--wds-font-line-height-body-tiny, 16px);
    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);
  }
}