$custom-modal-border-radius: var(--wds-custom-modal-border-radius, var(--wds-border-radius-surface-modal, 12px)) !default;
$custom-modal-close-button-fill: var(--wds-custom-modal-close-button-fill, var(--wds-color-fill-dark-secondary, #3a3a3b)) !default;
$custom-modal-close-button-size: var(--wds-custom-modal-close-button-size, var(--wds-space-600, 24px)) !default;
$custom-modal-content-padding-horizontal: var(--wds-custom-modal-content-padding-horizontal, var(--wds-space-600, 24px)) !default;
$custom-modal-content-padding-vertical: var(--wds-custom-modal-content-padding-vertical, var(--wds-space-600, 24px)) !default;
$custom-modal-footer-padding-horizontal: var(--wds-custom-modal-footer-padding-horizontal, var(--wds-space-600, 24px)) !default;
$custom-modal-footer-padding-vertical: var(--wds-custom-modal-footer-padding-vertical, var(--wds-space-600, 24px)) !default;
$custom-modal-header-padding-left: var(--wds-custom-modal-header-padding-left, var(--wds-space-600, 24px)) !default;
$custom-modal-header-padding-right: var(--wds-custom-modal-header-padding-right, var(--wds-space-500, 20px)) !default;
$custom-modal-header-padding-vertical: var(--wds-custom-modal-header-padding-vertical, var(--wds-space-600, 24px)) !default;
$custom-modal-header-subtitle-font-line-height: var(--wds-custom-modal-header-subtitle-font-line-height, var(--wds-font-line-height-body-small, 18px)) !default;
$custom-modal-header-subtitle-font-size: var(--wds-custom-modal-header-subtitle-font-size, var(--wds-font-size-body-small, 14px)) !default;

.custom-modal-layout {
  &.base-modal-layout {
    border-radius: $custom-modal-border-radius;
  }

  &:not(&--remove-content-padding) .base-modal-layout-content__inner-content {
    padding-inline-start: $custom-modal-content-padding-horizontal;
    padding-inline-end: $custom-modal-content-padding-horizontal;
  }

  &:not(&--remove-content-padding)#{&}--show-header-divider
    .base-modal-layout-content__inner-content {
    padding-top: $custom-modal-content-padding-vertical;
  }

  &:not(&--remove-content-padding)#{&}--show-footer-divider
    .base-modal-layout-content__inner-content {
    padding-bottom: $custom-modal-content-padding-vertical;
  }

  .base-modal-layout-header__inner-content {
    padding-top: $custom-modal-header-padding-vertical;
    padding-bottom: $custom-modal-header-padding-vertical;
    padding-inline-start: $custom-modal-header-padding-left;
  }

  &.base-modal-layout--control-button-amount-0
    .base-modal-layout-header__inner-content {
    padding-inline-end: $custom-modal-header-padding-right;
  }

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

  &.base-modal-layout--control-button-amount-2
    .base-modal-layout-header__inner-content {
    padding-inline-end: calc(
      #{$custom-modal-header-padding-right} +
        #{$custom-modal-close-button-size} +
        var(--wds-space-50, calc(var(--wds-space-100, 6px) * 1)) + 24px
    );
  }

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

  &#{&}.base-modal-layout .base-modal-layout-header__subtitle {
    font-size: $custom-modal-header-subtitle-font-size;
    line-height: $custom-modal-header-subtitle-font-line-height;
  }

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