$announcement-modal-actions-padding: var(--wds-announcement-modal-actions-padding, var(--wds-space-1050, 42px));
$announcement-modal-border-radius: var(--wds-announcement-modal-border-radius, var(--wds-border-radius-1200, 24px));
$announcement-modal-close-button-fill: var(--wds-announcement-modal-close-button-fill, var(--wds-color-fill-dark-secondary, #f0efef));
$announcement-modal-close-button-icon-size: var(--wds-announcement-modal-close-button-icon-size, 8px);
$announcement-modal-close-button-size: var(--wds-announcement-modal-close-button-size, var(--wds-space-600, 24px));
$announcement-modal-content-gap: var(--wds-announcement-modal-content-gap, var(--wds-space-300, 12px));
$announcement-modal-footnote-content-alignment: var(--wds-announcement-modal-footnote-content-alignment, start);
$announcement-modal-help-button-icon-size: var(--wds-announcement-modal-help-button-icon-size, var(--wds-space-475, 18px));
$announcement-modal-help-button-size: var(--wds-announcement-modal-help-button-size, var(--wds-space-600, 24px));
$announcement-modal-padding-horizontal: var(--wds-announcement-modal-padding-horizontal, var(--wds-space-2400, 96px));
$announcement-modal-padding-vertical: var(--wds-announcement-modal-padding-vertical, var(--wds-space-1100, 44px));
$announcement-modal-text-font-line-height: var(--wds-announcement-modal-text-font-line-height, var(--wds-space-500, 20px));
$announcement-modal-title-font-line-height: var(--wds-announcement-modal-title-font-line-height, var(--wds-space-800, 32px));
$announcement-modal-title-font-size: var(--wds-announcement-modal-title-font-size, var(--wds-font-size-heading-2, 24px));
$announcement-modal-title-font-weight: var(--wds-announcement-modal-title-font-weight, var(--wds-font-weight-heading-2, 500));
$announcement-modal-top-controls-gap: var(--wds-announcement-modal-top-controls-gap, var(--wds-space-100, 4px));
$announcement-modal-top-controls-padding-end: var(--wds-announcement-modal-top-controls-padding-end, var(--wds-space-300, 12px));
$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));

.announcement-modal-layout {
  &.base-modal-layout {
    padding-top: $announcement-modal-padding-vertical;
    border-radius: $announcement-modal-border-radius;
  }

  .base-modal-layout-header__title.base-modal-layout-header__title {
    font-size: $announcement-modal-title-font-size;
    line-height: $announcement-modal-title-font-line-height;
    font-weight: $announcement-modal-title-font-weight;
  }

  .base-modal-layout-content__inner-content
    [data-weight='thin'][data-size='medium'] {
    line-height: $announcement-modal-text-font-line-height;
  }

  .base-modal-layout-header {
    padding: 0 $announcement-modal-padding-horizontal
      $announcement-modal-content-gap
      $announcement-modal-padding-horizontal;
  }

  .base-modal-layout-content__inner-content {
    padding: 0 $announcement-modal-padding-horizontal;
    line-height: $announcement-modal-text-font-line-height;
  }

  .base-modal-layout-footer__inner-content {
    padding-top: $announcement-modal-actions-padding;
    padding-inline-end: $announcement-modal-padding-horizontal;
    padding-bottom: $announcement-modal-padding-vertical;
    padding-inline-start: $announcement-modal-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;
    justify-content: $announcement-modal-footnote-content-alignment;
    text-align: $announcement-modal-footnote-content-alignment;
  }

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

  .base-modal-layout__control-buttons {
    inset-inline-end: $announcement-modal-top-controls-padding-end;
  }

  .base-modal-layout__control-buttons.base-modal-layout__control-buttons {
    gap: $announcement-modal-top-controls-gap;
  }

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

    svg {
      width: $announcement-modal-close-button-icon-size;
      height: $announcement-modal-close-button-icon-size;
    }
  }

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

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

  &.announcement-modal-layout--mobile .base-modal-layout-header {
    padding: 0 30px $announcement-modal-content-gap 30px;
  }
}