$spacing-30: 30px;
$spacing-48: 48px;
$spacing-90: 90px;

$paddings-vertical-medium: var(
  --wds-marketing-page-paddings-vertical-medium, var(--wds-space-500, #{$spacing-30}));
$paddings-vertical-large: var(
  --wds-marketing-page-paddings-vertical-large, var(--wds-space-800, #{$spacing-48}));
$paddings-horizontal-medium: var(
  --wds-marketing-page-paddings-horizontal-medium, var(--wds-space-800, #{$spacing-48}));
$paddings-horizontal-large: var(
  --wds-marketing-page-paddings-horizontal-large, var(--wds-space-1500, #{$spacing-90}));

.marketing-page-layout {
  &__content-container {
    min-width: 360px;
    max-width: 576px;
    box-sizing: border-box;
    justify-content: center;
  }

  &--layout-image-side-end#{&}--horizontal-size-medium &__content-container {
    padding-left: var(
      --wds-marketing-page-content-padding-start-medium, var(--wds-space-800, #{$spacing-48}));
    padding-right: var(
      --wds-marketing-page-content-padding-end-medium, var(--wds-space-800, #{$spacing-48}));
  }

  &--layout-image-side-end#{&}--horizontal-size-large &__content-container {
    padding-left: var(
      --wds-marketing-page-content-padding-start-large, var(--wds-space-1500, #{$spacing-90}));
    padding-right: var(
      --wds-marketing-page-content-padding-end-large, var(--wds-space-1500, #{$spacing-90}));
  }

  &--layout-image-side-end#{&}--vertical-size-medium &__content-container {
    padding-top: #{$paddings-vertical-medium};
    padding-bottom: #{$paddings-vertical-medium};
  }

  &--layout-image-side-end#{&}--vertical-size-large &__content-container {
    padding-top: #{$paddings-vertical-large};
    padding-bottom: #{$paddings-vertical-large};
  }

  &__image-cell {
    overflow: hidden;
    max-width: 100%;
    grid-column: span 6;
    grid-row: span 1;
  }

  &--mobile &__image-cell,
  &--layout-image-top &__image-cell {
    grid-column: span 12;
  }

  &--layout-image-side-end:not(#{&}--mobile) &__image-cell {
    grid-row: var(--wds-marketing-page-image-grid-row, span 1);
  }

  &--layout-image-side-end &__image-container {
    display: var(--wds-marketing-page-image-display, block);
    flex-direction: column;
  }

  &__image-container {
    min-width: 360px;
    max-width: 1020px;
    min-height: 240px;
    max-height: 768px;
    box-sizing: border-box;
  }

  &__image-container--full {
    height: 100%;
    max-height: 100%;
  }

  &--layout-image-side-end:not(#{&}--remove-image-vertical-padding)#{&}--vertical-size-medium
    &__image-container {
    padding-top: var(
      --wds-marketing-page-image-padding-vertical-medium, var(--wds-space-500, #{$spacing-30}));
    padding-bottom: var(
      --wds-marketing-page-image-padding-vertical-medium, var(--wds-space-500, #{$spacing-30}));
  }

  &--layout-image-side-end:not(#{&}--remove-image-vertical-padding)#{&}--vertical-size-large
    &__image-container {
    padding-top: var(
      --wds-marketing-page-image-padding-vertical-large, var(--wds-space-800, #{$spacing-48}));
    padding-bottom: var(
      --wds-marketing-page-image-padding-vertical-large, var(--wds-space-800, #{$spacing-48}));
  }

  &--layout-image-side-end:not(#{&}--remove-image-horizontal-padding)#{&}--horizontal-size-medium
    &__image-container {
    padding-right: var(
      --wds-marketing-page-image-padding-end-medium, var(--wds-space-800, #{$spacing-48}));
  }

  &--layout-image-side-end:not(#{&}--remove-image-horizontal-padding)#{&}--horizontal-size-large
    &__image-container {
    padding-right: var(
      --wds-marketing-page-image-padding-end-large, var(--wds-space-1500, #{$spacing-90}));
  }

  &__footer-cell {
    max-width: 100%;
    grid-column: span 12;
    grid-row: span 1;
  }

  &--layout-image-side-end:not(#{&}--mobile) &__footer-cell {
    grid-column: var(--wds-marketing-page-footer-grid-column, span 12);
    align-self: end;
  }

  &__footer-divider-container {
    display: var(--wds-marketing-page-footer-divider-display, block);
  }

  &__footer-container {
    box-sizing: border-box;
  }

  &--layout-image-side-end#{&}--horizontal-size-medium &__footer-container {
    padding-left: var(
      --wds-marketing-page-content-padding-start-medium, var(--wds-space-800, #{$spacing-48}));
    padding-right: var(
      --wds-marketing-page-content-padding-end-medium, var(--wds-space-800, #{$spacing-48}));
    padding-bottom: var(--wds-marketing-page-footer-padding-bottom, var(--wds-space-0, 0));
  }

  &--layout-image-side-end#{&}--horizontal-size-large &__footer-container {
    padding-left: var(
      --wds-marketing-page-content-padding-start-large, var(--wds-space-1500, #{$spacing-90}));
    padding-right: var(
      --wds-marketing-page-content-padding-end-large, var(--wds-space-1500, #{$spacing-90}));
    padding-bottom: var(--wds-marketing-page-footer-padding-bottom, var(--wds-space-0, 0));
  }

  &--mobile &__content-container {
    min-width: 0;
  }

  &--mobile &__image-container {
    min-width: 0;
    min-height: 0;
  }

  &--mobile#{&}--layout-image-side-end#{&}--horizontal-size-medium
    &__content-container,
  &--mobile#{&}--layout-image-side-end#{&}--horizontal-size-large
    &__content-container {
    padding-right: #{$spacing-30};
    padding-left: #{$spacing-30};
  }

  &--mobile#{&}--layout-image-side-end:not(#{&}--remove-image-horizontal-padding)#{&}--horizontal-size-medium
    &__image-container,
  &--mobile#{&}--layout-image-side-end:not(#{&}--remove-image-horizontal-padding)#{&}--horizontal-size-large
    &__image-container {
    padding-right: #{$spacing-30};
    padding-left: #{$spacing-30};
  }

  &--mobile#{&}--layout-image-side-end#{&}--horizontal-size-medium
    &__footer-container,
  &--mobile#{&}--layout-image-side-end#{&}--horizontal-size-large
    &__footer-container {
    padding-left: #{$spacing-30};
    padding-right: #{$spacing-30};
  }

  &--mobile#{&}--layout-image-side-end:not(#{&}--remove-image-vertical-padding)#{&}--vertical-size-medium
    &__image-container {
    padding-bottom: calc(#{$paddings-vertical-medium} / 4);
  }

  &--mobile#{&}--layout-image-side-end:not(#{&}--remove-image-vertical-padding)#{&}--vertical-size-large
    &__image-container {
    padding-bottom: calc(#{$paddings-vertical-large} / 4);
  }

  &--mobile#{&}--layout-image-side-end#{&}--vertical-size-medium
    &__content-container {
    padding-top: calc(#{$paddings-vertical-medium} / 4);
  }

  &--mobile#{&}--layout-image-side-end#{&}--vertical-size-large
    &__content-container {
    padding-top: calc(#{$paddings-vertical-large} / 4);
  }

  &--layout-image-top &__content-container {
    min-width: 0;
    max-width: none;
    padding-top: var(--wds-marketing-page-image-top-content-padding-top, 48px);
    padding-bottom: var(
      --wds-marketing-page-image-top-content-padding-bottom,
      48px
    );
    padding-left: var(
      --wds-marketing-page-image-top-content-padding-horizontal,
      48px
    );
    padding-right: var(
      --wds-marketing-page-image-top-content-padding-horizontal,
      48px
    );
  }

  &--layout-image-top &__image-container {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: none;
    padding-top: var(--wds-marketing-page-image-top-image-padding, 24px);
    padding-left: var(--wds-marketing-page-image-top-image-padding, 24px);
    padding-right: var(--wds-marketing-page-image-top-image-padding, 24px);
    padding-bottom: 0;
  }

  &--layout-image-top &__image-container > * {
    border-radius: var(--wds-marketing-page-image-top-image-border-radius, 8px);
  }

  &--layout-image-top#{&}--remove-image-horizontal-padding &__image-container {
    padding-left: 0;
    padding-right: 0;
  }

  &--layout-image-top#{&}--remove-image-vertical-padding &__image-container {
    padding-top: 0;
  }

  &--layout-image-top &__footer-container {
    padding-left: var(
      --wds-marketing-page-image-top-content-padding-horizontal,
      48px
    );
    padding-right: var(
      --wds-marketing-page-image-top-content-padding-horizontal,
      48px
    );
    padding-bottom: var(
      --wds-marketing-page-image-top-footer-padding-bottom,
      24px
    );
  }
}