$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-600, 24px));
$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));
$custom-modal-footnote-text-font-weight: var(--wds-custom-modal-footnote-text-font-weight, var(--wds-font-weight-medium, 500));
$message-modal-close-button-fill: var(--wds-message-modal-close-button-fill, var(--wds-color-fill-dark-secondary, #f0efef));
$message-modal-close-button-size: var(--wds-message-modal-close-button-size, var(--wds-space-600, 24px));
$message-modal-content-gap: var(--wds-message-modal-content-gap, var(--wds-space-300, 12px));
$message-modal-help-button-icon-size: var(--wds-message-modal-help-button-icon-size, var(--wds-space-475, 18px));
$message-modal-help-button-size: var(--wds-message-modal-help-button-size, var(--wds-space-600, 24px));
$message-modal-illustration-content-gap: var(--wds-message-modal-illustration-content-gap, var(--wds-space-400, 16px));
$message-modal-illustration-margin-start: var(--wds-message-modal-illustration-margin-start, var(--wds-space-600, 24px));
$message-modal-illustration-margin-top: var(--wds-message-modal-illustration-margin-top, 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-600, 24px));
$message-modal-text-font-line-height: var(--wds-message-modal-text-font-line-height, var(--wds-font-line-height-body-small, 18px));
$message-modal-text-font-size: var(--wds-message-modal-text-font-size, var(--wds-font-size-body-small, 14px));
$message-modal-text-font-weight: var(--wds-message-modal-text-font-weight, var(--wds-font-weight-regular, 400));
$message-modal-title-font-family: var(--wds-message-modal-title-font-family, var(--wds-font-family-display, "Madefor Display", Madefor, "Helvetica Neue", Helvetica, Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif));
$message-modal-title-font-line-height: var(--wds-message-modal-title-font-line-height, var(--wds-space-800, 32px));
$message-modal-title-font-size: var(--wds-message-modal-title-font-size, var(--wds-font-size-800, 24px));
$message-modal-top-controls-gap: var(--wds-message-modal-top-controls-gap, var(--wds-space-100, 4px));
$message-modal-top-controls-paddings: var(--wds-message-modal-top-controls-paddings, var(--wds-space-150, 6px));

.message-modal-layout {
  &#{&} .base-modal-layout-header__title {
    font-family: $message-modal-title-font-family;
    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-bottom: $message-modal-content-gap;
    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__control-buttons {
    top: calc(#{$message-modal-top-controls-paddings} * 2);
    right: calc(#{$message-modal-top-controls-paddings} * 2);
  }

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

  .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;
    font-weight: $message-modal-text-font-weight;
    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;
    font-weight: $custom-modal-footnote-text-font-weight;
    line-height: $custom-modal-footnote-text-font-line-height;
  }

  .base-modal-layout-footnote__inner-content [data-weight='thin'][data-weight='thin'] {
    font-weight: $custom-modal-footnote-text-font-weight;
  }

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

  .base-modal-layout-illustration {
    margin: $message-modal-illustration-margin-top 0 0 $message-modal-illustration-margin-start;
  }

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