.message-modal-layout {
  min-width: 510px;
  max-width: min-content;
  border-radius: var(--wds-border-radius-surface-modal, 8px);

  &__top-area-container {
    display: flex;
    overflow-y: auto;
  }

  &__content-area-container {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  &--has-illustration {
    min-width: 600px;
    max-width: min-content;
  }

  .base-modal-layout-header__title {
    font-family: var(--wds-message-modal-title-font-family, var(--wds-font-family-default, var(--wsr-font-family, Madefor, "Helvetica Neue", Helvetica, Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif)));
    line-height: var(--wds-message-modal-title-font-line-height, var(--wds-font-line-height-heading-2, var(--wsr-heading-line-height-l, 28px)));
    font-size: var(--wds-message-modal-title-font-size, var(--wds-font-size-heading-2, var(--wsr-heading-font-size-l, 21px)));
  }

  .base-modal-layout-header {
    padding-top: var(--wds-message-modal-padding-vertical, var(--wds-space-400, 18px));
    padding-bottom: var(--wds-message-modal-content-gap, var(--wds-space-200, 12px));
    padding-inline-start: var(--wds-message-modal-padding-horizontal, var(--wds-space-400, 24px));
  }

  &.base-modal-layout--control-button-amount-0 .base-modal-layout-header {
    padding-inline-end: var(--wds-message-modal-padding-horizontal, var(--wds-space-400, 24px));
  }

  &.base-modal-layout--control-button-amount-1 .base-modal-layout-header {
    padding-inline-end: calc(
      var(--wds-message-modal-padding-horizontal, var(--wds-space-400, 24px)) +
        var(--wds-message-modal-close-button-size, var(--wds-space-500, 24px))
    );
  }

  &.base-modal-layout--control-button-amount-2 .base-modal-layout-header {
    padding-inline-end: calc(
      var(--wds-message-modal-padding-horizontal, var(--wds-space-400, 24px)) +
        var(--wds-message-modal-close-button-size, var(--wds-space-500, 24px)) +
        var(--wds-message-modal-top-controls-gap, var(--wds-space-50, calc(var(--wds-space-100, 6px) * 1))) +
        var(--wds-message-modal-help-button-size, var(--wds-space-500, 24px))
    );
  }

  .base-modal-layout__control-buttons {
    top: calc(
      var(--wds-message-modal-top-controls-paddings, var(--wds-space-100, 6px)) * 2
    );
    right: calc(
      var(--wds-message-modal-top-controls-paddings, var(--wds-space-100, 6px)) * 2
    );
    gap: var(--wds-message-modal-top-controls-gap, var(--wds-space-50, calc(var(--wds-space-100, 6px) * 1)));
  }

  .base-modal-layout__close-button[data-skin='dark'][data-size='large'] {
    width: var(--wds-message-modal-close-button-size, var(--wds-space-500, 30px));
    height: var(--wds-message-modal-close-button-size, var(--wds-space-500, 30px));
    background-color: var(--wds-message-modal-close-button-fill, transparent);

    svg {
      width: var(--wds-message-modal-close-button-icon-size, var(--wds-space-200, 12px));
      height: var(--wds-message-modal-close-button-icon-size, var(--wds-space-200, 12px));
    }
  }

  .base-modal-layout__help-button[data-skin='dark'][data-size='large'] {
    width: var(--wds-message-modal-help-button-size, var(--wds-space-500, 30px));
    height: var(--wds-message-modal-help-button-size, var(--wds-space-500, 30px));
  }

  .base-modal-layout__help-icon {
    width: var(--wds-message-modal-help-button-icon-size, var(--wds-space-400, 24px));
    height: var(--wds-message-modal-help-button-icon-size, var(--wds-space-400, 24px));
  }

  .base-modal-layout-content {
    flex: 1;
  }

  .base-modal-layout-content__inner-content {
    color: var(--wds-color-text-standard-primary, inherit);
    font-family: var(
      --wds-font-family-default,
      var(--wsr-font-family, Madefor, "Helvetica Neue", Helvetica, Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif)
    );
    font-size: var(--wds-message-modal-text-font-size, var(--wds-font-size-body-medium, var(--wsr-text-font-size-medium, 16px)));
    font-weight: var(--wds-message-modal-text-font-weight, var(--wds-font-weight-medium, var(--wsr-font-weight-medium, 530)));
    line-height: var(--wds-message-modal-text-font-line-height, var(--wds-font-line-height-body-medium, var(--wsr-text-line-height-medium, 24px)));
    letter-spacing: var(--wds-font-letter-spacing-0, unset);
    padding-inline-end: var(--wds-custom-modal-footer-padding-horizontal, var(--wds-space-400, 24px));
    padding-inline-start: var(--wds-custom-modal-footer-padding-horizontal, var(--wds-space-400, 24px));
    padding-bottom: var(--wds-space-100, 6px);
  }

  .base-modal-layout-footnote .base-modal-layout-footnote__divider {
    min-height: var(--wds-border-width-varied, 1px);
  }

  .base-modal-layout-footnote__inner-content {
    color: var(--wds-color-text-standard-primary, inherit);
    font-family: var(
      --wds-font-family-default,
      var(--wsr-font-family, Madefor, "Helvetica Neue", Helvetica, Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif)
    );
    font-size: var(--wds-custom-modal-footnote-text-font-size, var(--wds-font-size-body-small, var(--wsr-text-font-size-tiny, 12px)));
    font-weight: var(--wds-custom-modal-footnote-text-font-weight, var(--wds-font-weight-regular, var(--wsr-font-weight-medium, 530)));
    line-height: var(--wds-custom-modal-footnote-text-font-line-height, var(--wds-font-line-height-body-small, var(--wsr-text-line-height-tiny, 15px)));
    letter-spacing: var(--wds-font-letter-spacing-0, unset);
    justify-content: flex-start;
  }

  .base-modal-layout-footnote__inner-content [data-weight='thin'] {
    font-weight: var(--wds-custom-modal-footnote-text-font-weight, var(--wds-font-weight-regular, var(--wsr-font-weight-regular, 400)));
  }

  .base-modal-layout-footer__side-actions {
    min-width: max-content;
  }

  .base-modal-layout-footer__inner-content {
    padding: var(--wds-custom-modal-footer-padding-vertical, var(--wds-space-300, 18px))
      var(--wds-custom-modal-footer-padding-horizontal, var(--wds-space-400, 24px));
  }

  .base-modal-layout-illustration {
    margin: var(--wds-message-modal-illustration-margin-top, var(--wds-space-300, 18px)) 0 0
      var(--wds-message-modal-illustration-margin-start, var(--wds-space-400, 24px));
    max-height: 120px;
    max-width: 120px;
    overflow: hidden;
  }

  &--has-illustration .base-modal-layout-header {
    padding-inline-start: var(--wds-message-modal-illustration-content-gap, var(--wds-space-400, 24px));
  }

  &--has-illustration .base-modal-layout-content__inner-content {
    padding-inline-start: var(--wds-message-modal-illustration-content-gap, var(--wds-space-400, 24px));
  }
}