$custom-modal-footer-padding-horizontal: var(--wds-custom-modal-footer-padding-horizontal, var(--wds-space-600, 24px));
$custom-modal-footer-padding-vertical: var(--wds-custom-modal-footer-padding-vertical, var(--wds-space-400, 16px));
$custom-modal-footnote-text-font-line-height: var(--wds-custom-modal-footnote-text-font-line-height, var(--wds-font-line-height-body-tiny, 16px));
$custom-modal-footnote-text-font-size: var(--wds-custom-modal-footnote-text-font-size, var(--wds-font-size-body-tiny, 12px));
$message-modal-close-button-icon-size: var(--wds-message-modal-close-button-icon-size, var(--wds-space-300, 12px));
$message-modal-close-button-size: var(--wds-message-modal-close-button-size, var(--wds-space-700, 28px));
$message-modal-help-button-icon-size: var(--wds-message-modal-help-button-icon-size, var(--wds-space-600, 24px));
$message-modal-help-button-size: var(--wds-message-modal-help-button-size, var(--wds-space-700, 28px));
$message-modal-illustration-content-gap: var(--wds-message-modal-illustration-content-gap, var(--wds-space-600, 24px));
$message-modal-padding-horizontal: var(--wds-message-modal-padding-horizontal, var(--wds-space-600, 24px));
$message-modal-padding-vertical: var(--wds-message-modal-padding-vertical, var(--wds-space-500, 20px));
$message-modal-text-font-line-height: var(--wds-message-modal-text-font-line-height, var(--wds-font-line-height-body-small, 20px));
$message-modal-text-font-size: var(--wds-message-modal-text-font-size, var(--wds-font-size-body-small, 14px));
$message-modal-title-font-line-height: var(--wds-message-modal-title-font-line-height, var(--wds-font-line-height-heading-4, 24px));
$message-modal-title-font-size: var(--wds-message-modal-title-font-size, var(--wds-font-size-heading-4, 18px));
$message-modal-top-controls-gap: var(--wds-message-modal-top-controls-gap, var(--wds-space-50, 2px));

.message-modal-layout {
  &#{&} .base-modal-layout-header__title {
    line-height: $message-modal-title-font-line-height;
    font-size: $message-modal-title-font-size;
  }

  .base-modal-layout-header {
    padding-top: $message-modal-padding-vertical;
    padding-inline-start: $message-modal-padding-horizontal;
  }

  &.base-modal-layout--control-button-amount-0 .base-modal-layout-header {
    padding-inline-end: $message-modal-padding-horizontal;
  }

  &.base-modal-layout--control-button-amount-1 .base-modal-layout-header {
    padding-inline-end: calc(
      #{$message-modal-padding-horizontal} +
        #{$message-modal-close-button-size}
    );
  }

  &.base-modal-layout--control-button-amount-2 .base-modal-layout-header {
    padding-inline-end: calc(
      #{$message-modal-padding-horizontal} +
        #{$message-modal-close-button-size} +
        #{$message-modal-top-controls-gap} +
        #{$message-modal-help-button-size}
    );
  }

  .base-modal-layout__close-button[data-skin='dark'][data-size='large'] {
    width: $message-modal-close-button-size;
    height: $message-modal-close-button-size;
  }

  .base-modal-layout__close-button[data-skin='dark'][data-size='large'] svg {
    width: $message-modal-close-button-icon-size;
    height: $message-modal-close-button-icon-size;
  }

  .base-modal-layout__help-button[data-skin='dark'][data-size='large'] {
    width: $message-modal-help-button-size;
    height: $message-modal-help-button-size;
  }

  .base-modal-layout__help-icon {
    width: $message-modal-help-button-icon-size;
    height: $message-modal-help-button-icon-size;
  }

  .base-modal-layout-content__inner-content {
    font-size: $message-modal-text-font-size;
    line-height: $message-modal-text-font-line-height;
    padding-inline-end: $custom-modal-footer-padding-horizontal;
    padding-inline-start: $custom-modal-footer-padding-horizontal;
  }

  .base-modal-layout-footnote__inner-content {
    font-size: $custom-modal-footnote-text-font-size;
    line-height: $custom-modal-footnote-text-font-line-height;
  }

  .base-modal-layout-footer__inner-content {
    padding: $custom-modal-footer-padding-vertical $custom-modal-footer-padding-horizontal;
  }

  &--has-illustration .base-modal-layout-header {
    padding-inline-start: $message-modal-illustration-content-gap;
  }

  &--has-illustration .base-modal-layout-content__inner-content {
    padding-inline-start: $message-modal-illustration-content-gap;
  }
}