.announcement-modal-layout {
  &.base-modal-layout {
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    width: 600px;
    padding-top: var(--wds-announcement-modal-padding-vertical, var(--wds-space-800, 48px));
    border-radius: var(--wds-announcement-modal-border-radius, var(--wds-border-radius-surface-modal, 8px));
  }

  .base-modal-layout-header__title {
    font-size: var(--wds-announcement-modal-title-font-size, var(--wds-font-size-heading-1, var(--wsr-heading-font-size-xl, 28px)));
    line-height: var(--wds-announcement-modal-title-font-line-height, var(--wds-font-line-height-heading-1, var(--wsr-text-line-height-medium, 36px)));
    font-weight: var(--wds-announcement-modal-title-font-weight, var(--wds-font-weight-heading-1, 700));
  }

  .base-modal-layout-content__inner-content
    [data-weight='thin'][data-size='medium'] {
    font-size: var(--wds-announcement-modal-text-font-size, var(--wds-font-size-body-small, var(--wsr-text-font-size-medium, 16px)));
    line-height: var(--wds-announcement-modal-text-font-line-height, var(--wds-font-line-height-body-small, var(--wsr-text-line-height-medium, 24px)));
  }

  .base-modal-layout-illustration {
    margin-bottom: var(--wds-space-500, 30px);
    max-height: 200px;
    min-height: 120px;
    max-width: 444px;
    overflow: hidden;
  }

  .base-modal-layout-header {
    padding: 0 var(--wds-announcement-modal-padding-horizontal, var(--wds-space-1300, 78px))
      var(--wds-announcement-modal-content-gap, var(--wds-space-200, 12px))
      var(--wds-announcement-modal-padding-horizontal, var(--wds-space-1300, 78px));
  }

  .base-modal-layout-content__inner-content {
    padding: 0 var(--wds-announcement-modal-padding-horizontal, var(--wds-space-1300, 78px));
    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-announcement-modal-text-font-size, var(--wds-font-size-body-small, var(--wsr-heading-font-size-m, 18px)));
    line-height: var(--wds-announcement-modal-text-font-line-height, var(--wds-font-line-height-body-small, var(--wsr-text-line-height-medium, 24px)));
  }

  .base-modal-layout-footer__inner-content {
    padding-top: var(--wds-announcement-modal-actions-padding, var(--wds-space-700, 42px));
    padding-inline-end: var(--wds-announcement-modal-padding-horizontal, var(--wds-space-1300, 78px));
    padding-bottom: var(--wds-announcement-modal-padding-vertical, var(--wds-space-800, 48px));
    padding-inline-start: var(--wds-announcement-modal-padding-horizontal, var(--wds-space-1300, 78px));
    justify-content: center;
    gap: var(--wds-space-200, 8px);
  }

  &.base-modal-layout
    .base-modal-layout-footer__inner-content
    > .base-modal-layout-footer__side-actions {
    flex: 0 0 auto;
    margin-inline-end: 0;
  }

  .base-modal-layout-footer__actions {
    margin-inline-start: 0;
  }

  .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: var(--wds-announcement-modal-footnote-content-alignment, center);
    text-align: var(--wds-announcement-modal-footnote-content-alignment, center);
  }

  .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__control-buttons {
    top: var(--wds-announcement-modal-top-controls-padding-top, var(--wds-space-300, calc(var(--wds-space-100, 6px) * 2)));
    inset-inline-end: var(--wds-announcement-modal-top-controls-padding-end, var(--wds-space-200, calc(var(--wds-space-100, 6px) * 2)));
    gap: var(--wds-announcement-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-announcement-modal-close-button-size, var(--wds-space-500, 30px));
    height: var(--wds-announcement-modal-close-button-size, var(--wds-space-500, 30px));
    background-color: var(--wds-announcement-modal-close-button-fill, transparent);

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

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

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

  &.announcement-modal-layout--mobile {
    width: 100%;
    max-width: 600px;

    .base-modal-layout-illustration {
      max-height: 140px;
      min-height: 0;
      max-width: 100%;
    }

    .base-modal-layout-header {
      padding: 0 30px var(--wds-announcement-modal-content-gap, var(--wds-space-200, 12px)) 30px;
    }

    .base-modal-layout-content__inner-content {
      padding: 0 30px;
    }

    .base-modal-layout-footer__inner-content {
      padding-inline-end: 30px;
      padding-inline-start: 30px;
    }
  }
}