/*
 * Was the sheet-local `--badgePaddingSize`. Renamed into the `--wds-` namespace
 * so the bundler leaves it alone.
 */
$badge-padding: --wds-internal-marketing-layout-badge-padding;

$font-family: Madefor, "Helvetica Neue", Helvetica, Arial, "メイリオ", "meiryo",
  "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;

$text-line-height-small: var(
  --wds-font-line-height-body-small,
  var(--wsr-text-line-height-small, 18px)
);
$text-line-height-medium: var(
  --wds-font-line-height-body-medium,
  var(--wsr-text-line-height-medium, 24px)
);
$text-font-size-small: var(
  --wds-font-size-body-small,
  var(--wsr-text-font-size-small, 14px)
);
$text-font-size-medium: var(
  --wds-font-size-body-medium,
  var(--wsr-text-font-size-medium, 16px)
);
$font-weight-regular: var(
  --wds-font-weight-regular,
  var(--wsr-font-weight-regular, 400)
);
$font-weight-bold: var(--wds-font-weight-bold, var(--wsr-font-weight-bold, 700));
$description-color: var(
  --wds-marketing-layout-description-color,
  var(--wds-color-text-standard-secondary, var(--wsr-color-D20, #333853))
);

.marketing-layout {
  writing-mode: horizontal-tb;
  display: flex;
  align-items: stretch;

  &--size-small {
    #{$badge-padding}: var(--wds-marketing-layout-badge-offset-small, 12px);
  }

  &--size-medium {
    #{$badge-padding}: var(--wds-marketing-layout-badge-offset-medium, 12px);
  }

  &--size-tiny {
    #{$badge-padding}: var(--wds-marketing-layout-badge-offset-tiny, 18px);
  }

  &--direction-horizontal#{&}--size-tiny {
    min-height: var(--wds-marketing-layout-min-height-tiny, auto);
  }

  &--direction-horizontal#{&}--size-small {
    min-height: var(--wds-marketing-layout-min-height-small, auto);
  }

  &--direction-horizontal#{&}--size-medium {
    min-height: var(--wds-marketing-layout-min-height-medium, auto);
  }

  &--direction-vertical {
    flex-direction: column;
    align-items: stretch;
  }

  &--direction-vertical#{&}--size-tiny {
    padding-top: var(--wds-marketing-layout-padding-vertical-tiny, var(--wds-space-300, 18px));
    padding-bottom: var(--wds-marketing-layout-padding-vertical-tiny, var(--wds-space-300, 18px));
    gap: var(--wds-space-300, 18px);
    padding-left: var(--wds-marketing-layout-padding-right-tiny, var(--wds-space-500, 30px));
    padding-right: var(--wds-marketing-layout-padding-right-tiny, var(--wds-space-500, 30px));
  }

  &--direction-vertical#{&}--size-small,
  &--direction-vertical#{&}--size-medium {
    padding-top: var(--wds-marketing-layout-padding-vertical-small, var(--wds-space-400, 24px));
    padding-bottom: var(--wds-marketing-layout-padding-vertical-small, var(--wds-space-400, 24px));
    gap: var(--wds-space-400, 24px);
    padding-left: var(--wds-marketing-layout-padding-right-small, var(--wds-space-500, 30px));
    padding-right: var(--wds-marketing-layout-padding-right-small, var(--wds-space-500, 30px));
  }

  &__content-container {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: var(--wds-marketing-layout-content-justify, center);
    align-items: flex-start;
  }

  &__content-wrapper {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
  }

  &__content-wrapper--size-tiny#{&}__content-wrapper--inverted {
    padding-left: var(--wds-marketing-layout-padding-left-tiny, var(--wds-space-400, 24px));
    padding-right: var(--wds-marketing-layout-padding-right-tiny, var(--wds-space-500, 30px));
  }

  &__content-wrapper--size-tiny {
    padding-top: var(--wds-marketing-layout-padding-vertical-tiny, var(--wds-space-300, 18px));
    padding-bottom: var(--wds-marketing-layout-padding-vertical-tiny, var(--wds-space-300, 18px));
    padding-left: var(--wds-marketing-layout-padding-right-tiny, var(--wds-space-500, 30px));
    padding-right: var(--wds-marketing-layout-padding-left-tiny, var(--wds-space-400, 24px));
  }

  &--badge#{&}--size-tiny,
  &--hidden-badge#{&}--size-tiny {
    position: relative;
    padding-top: var(#{$badge-padding});
    padding-bottom: var(#{$badge-padding});
  }

  &__content-wrapper--size-small#{&}__content-wrapper--inverted {
    padding-left: var(--wds-marketing-layout-padding-left-small, var(--wds-space-400, 24px));
    padding-right: var(--wds-marketing-layout-padding-right-small, var(--wds-space-500, 30px));
  }

  &__content-wrapper--size-small {
    padding-top: var(--wds-marketing-layout-padding-vertical-small, var(--wds-space-400, 24px));
    padding-bottom: var(--wds-marketing-layout-padding-vertical-small, var(--wds-space-400, 24px));
    padding-left: var(--wds-marketing-layout-padding-right-small, var(--wds-space-500, 30px));
    padding-right: var(--wds-marketing-layout-padding-left-small, var(--wds-space-400, 24px));
  }

  &--badge#{&}--size-small,
  &--hidden-badge#{&}--size-small {
    position: relative;
    padding-top: var(#{$badge-padding});
    padding-bottom: var(#{$badge-padding});
  }

  &__content-wrapper--size-medium#{&}__content-wrapper--inverted {
    padding-left: var(--wds-marketing-layout-padding-right-medium, var(--wds-space-700, 42px));
    padding-right: var(--wds-marketing-layout-padding-left-medium, var(--wds-space-800, 48px));
  }

  &__content-wrapper--size-medium {
    padding-top: var(--wds-marketing-layout-padding-vertical-medium, var(--wds-space-400, 24px));
    padding-bottom: var(--wds-marketing-layout-padding-vertical-medium, var(--wds-space-400, 24px));
    padding-left: var(--wds-marketing-layout-padding-left-medium, var(--wds-space-800, 48px));
    padding-right: var(--wds-marketing-layout-padding-right-medium, var(--wds-space-700, 42px));
  }

  &--badge#{&}--size-medium,
  &--hidden-badge#{&}--size-medium {
    position: relative;
    padding-top: var(#{$badge-padding});
    padding-bottom: var(#{$badge-padding});
  }

  &--badge#{&}--direction-vertical#{&}--size-tiny,
  &--hidden-badge#{&}--direction-vertical#{&}--size-tiny {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  &--badge#{&}--direction-vertical#{&}--size-small,
  &--hidden-badge#{&}--direction-vertical#{&}--size-small,
  &--badge#{&}--direction-vertical#{&}--size-medium,
  &--hidden-badge#{&}--direction-vertical#{&}--size-medium {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  &__content-wrapper--direction-vertical {
    padding: 0px;
  }

  &--align-items-stretch &__content-container {
    justify-content: space-between;
  }

  &--inverted#{&}--direction-horizontal &__actions-container {
    align-self: var(--wds-marketing-layout-actions-alignment-inverted, auto);
  }

  &__title {
    padding-bottom: var(
      --wds-marketing-layout-title-gap-medium,
      var(--wds-space-200, 12px)
    );
  }

  /*
   * The old rule opened with `-st-mixin: text-medium-bold`, then re-declared every
   * one of the five properties that mixin sets, so the mixin contributed nothing.
   */
  &--size-tiny &__title {
    font-size: var(--wds-marketing-layout-title-font-size-tiny, 20px);
    line-height: var(
      --wds-marketing-layout-title-line-height-tiny,
      #{$text-line-height-medium}
    );
    font-weight: var(
      --wds-marketing-layout-title-font-weight-tiny,
      #{$font-weight-bold}
    );
    font-family: var(
      --wds-marketing-layout-title-font-family-tiny,
      var(--wds-font-family-default, var(--wsr-font-family, #{$font-family}))
    );
    letter-spacing: var(--wds-marketing-layout-title-letter-spacing-tiny, var(--wds-font-letter-spacing-0, unset));
    color: var(
      --wds-color-text-standard-primary,
      var(--wsr-color-D10, #000624)
    );
  }

  &--size-tiny &__title {
    padding-bottom: var(
      --wds-marketing-layout-title-gap-tiny,
      var(--wds-space-100, 6px)
    );
  }

  &--size-small &__title {
    padding-bottom: var(
      --wds-marketing-layout-title-gap-small,
      var(--wds-space-100, 6px)
    );
  }

  /* `__title-heading` is a `Heading` root and `__description-text` a `Text` root:
     the doubled root class keeps these typography overrides above the hubs' own
     compound state selectors */
  &#{&}--size-small &__title &__title-heading {
    font-size: var(
      --wds-marketing-layout-title-font-size-small,
      var(--wds-font-size-heading-3, var(--wsr-heading-font-size-m, 18px))
    );
    line-height: var(
      --wds-marketing-layout-title-line-height-small,
      var(--wds-font-line-height-heading-3, var(--wsr-heading-line-height-m, 24px))
    );
    font-weight: var(
      --wds-marketing-layout-title-font-weight-small,
      var(--wds-font-weight-heading-3, var(--wsr-font-weight-bold, 700))
    );
  }

  &#{&}--size-medium &__title &__title-heading {
    font-size: var(
      --wds-marketing-layout-title-font-size-medium,
      var(--wds-font-size-heading-2, var(--wsr-heading-font-size-l, 21px))
    );
    line-height: var(
      --wds-marketing-layout-title-line-height-medium,
      var(--wds-font-line-height-heading-2, var(--wsr-heading-line-height-l, 28px))
    );
    font-weight: var(
      --wds-marketing-layout-title-font-weight-medium,
      var(--wds-font-weight-heading-2, var(--wsr-font-weight-bold, 700))
    );
  }

  &#{&}--size-tiny &__description &__description-text {
    font-size: var(
      --wds-marketing-layout-description-font-size-tiny,
      #{$text-font-size-small}
    );
    line-height: var(
      --wds-marketing-layout-description-line-height-tiny,
      #{$text-line-height-small}
    );
    font-weight: var(
      --wds-marketing-layout-description-font-weight-tiny,
      #{$font-weight-regular}
    );
    color: #{$description-color};
  }

  &#{&}--size-small &__description &__description-text {
    font-size: var(
      --wds-marketing-layout-description-font-size-small,
      #{$text-font-size-small}
    );
    line-height: var(
      --wds-marketing-layout-description-line-height-small,
      #{$text-line-height-small}
    );
    font-weight: var(
      --wds-marketing-layout-description-font-weight-small,
      #{$font-weight-regular}
    );
    color: #{$description-color};
  }

  &#{&}--size-medium &__description &__description-text {
    font-size: var(
      --wds-marketing-layout-description-font-size-medium,
      #{$text-font-size-medium}
    );
    line-height: var(
      --wds-marketing-layout-description-line-height-medium,
      #{$text-line-height-medium}
    );
    font-weight: var(
      --wds-marketing-layout-description-font-weight-medium,
      #{$font-weight-regular}
    );
    color: #{$description-color};
  }

  &__description {
    max-width: var(--wds-marketing-layout-description-max-width, none);
  }

  &--with-actions &__description {
    padding-bottom: var(
      --wds-marketing-layout-actions-gap-medium,
      var(--wds-space-400, 24px)
    );
  }

  &--size-tiny#{&}--with-actions &__description {
    padding-bottom: var(
      --wds-marketing-layout-actions-gap-tiny,
      var(--wds-space-300, 18px)
    );
  }

  &--size-small#{&}--with-actions &__description {
    padding-bottom: var(
      --wds-marketing-layout-actions-gap-small,
      var(--wds-space-300, 18px)
    );
  }

  &__badge {
    position: var(--wds-marketing-layout-badge-position, absolute);
    top: var(--wds-marketing-layout-badge-top, 9px);
    left: var(--wds-marketing-layout-badge-side, -3px);
    margin-bottom: var(--wds-marketing-layout-badge-gap, 0px);
  }

  :global(.rtl) &__badge,
  :global([dir='rtl']) &--inverted &__badge {
    right: var(--wds-marketing-layout-badge-side, -3px);
    left: auto;
  }

  &__image-wrapper {
    align-items: center;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    flex: 1;
  }

  &__image {
    border-radius: var(--wds-marketing-layout-image-border-radius, 0px);
  }

  /* The image column holds a square driven by the card height, so the image follows the card instead of driving it.
     contain: size keeps the image's natural size out of the column's intrinsic size. */
  &--direction-horizontal &__image-background--url-image {
    flex: var(--wds-marketing-layout-image-wrapper-flex, 0 1 auto);
    width: var(--wds-marketing-layout-image-wrapper-width, auto);
    aspect-ratio: var(--wds-marketing-layout-image-aspect-ratio, auto);
    contain: var(--wds-marketing-layout-image-wrapper-contain, none);
  }

  /* contain: size hides the image from the flex sizing, so the column reserves the base square width itself. */
  &--direction-horizontal#{&}--size-tiny
    &__image-background--url-image {
    min-width: var(--wds-marketing-layout-min-height-tiny, auto);
  }

  &--direction-horizontal#{&}--size-small
    &__image-background--url-image {
    min-width: var(--wds-marketing-layout-min-height-small, auto);
  }

  &--direction-horizontal#{&}--size-medium
    &__image-background--url-image {
    min-width: var(--wds-marketing-layout-min-height-medium, auto);
  }

  &--direction-horizontal
    &__image-wrapper--url-image
    &__image {
    height: var(--wds-marketing-layout-image-height, auto);
    width: var(--wds-marketing-layout-image-width, 100%);
    aspect-ratio: var(--wds-marketing-layout-image-aspect-ratio, auto);
    object-fit: var(--wds-marketing-layout-image-object-fit, fill);
  }

  /* When content growth makes the card taller than the reserved image column,
     the capped width keeps the image inside its inset instead of spilling over the edges. */
  &--direction-horizontal#{&}--size-tiny
    &__image-wrapper--url-image
    &__image {
    max-width: var(--wds-marketing-layout-image-max-width-tiny, none);
  }

  &--direction-horizontal#{&}--size-small
    &__image-wrapper--url-image
    &__image {
    max-width: var(--wds-marketing-layout-image-max-width-small, none);
  }

  &--direction-horizontal#{&}--size-medium
    &__image-wrapper--url-image
    &__image {
    max-width: var(--wds-marketing-layout-image-max-width-medium, none);
  }

  /*
   * Two-hop chains only: component token -> its own resolved semantic token in
   * the default theme (`@wix/design-system-tokens/all.css`) -> literal. A prior
   * pass here nested the *other* (non-image) padding token's own chain as a
   * third hop, which doesn't match the documented shape and isn't needed -- the
   * component token already resolves through its semantic token to the same
   * literal.
   */
  /* The inverted image-wrapper rules must outrank the `image-padding +
     direction-vertical` hug reset below (three classes), which would otherwise
     win the tie by order and drop the inverted left/right padding — the
     Stylable `.root:imagePadding .imageWrapper:size(tiny):inverted` sat above
     it the same way. Hence the doubled slot class. */
  &--image-padding
    &__image-wrapper#{&}__image-wrapper--size-tiny#{&}__image-wrapper--inverted {
    padding-left: var(--wds-marketing-layout-image-padding-right-tiny, var(--wds-space-500, 30px));
    padding-right: var(--wds-marketing-layout-image-padding-left-tiny, var(--wds-space-400, 24px));
  }

  &--image-padding
    &__image-wrapper--size-tiny {
    padding-top: var(--wds-marketing-layout-image-padding-vertical-tiny, var(--wds-space-300, 18px));
    padding-bottom: var(--wds-marketing-layout-image-padding-vertical-tiny, var(--wds-space-300, 18px));
    padding-left: var(--wds-marketing-layout-image-padding-left-tiny, var(--wds-space-400, 24px));
    padding-right: var(--wds-marketing-layout-image-padding-right-tiny, var(--wds-space-500, 30px));
  }

  &--image-padding
    &__image-wrapper#{&}__image-wrapper--size-small#{&}__image-wrapper--inverted {
    padding-left: var(--wds-marketing-layout-image-padding-right-small, var(--wds-space-500, 30px));
    padding-right: var(--wds-marketing-layout-image-padding-left-small, var(--wds-space-400, 24px));
  }

  &--image-padding
    &__image-wrapper--size-small {
    padding-top: var(--wds-marketing-layout-image-padding-vertical-small, var(--wds-space-400, 24px));
    padding-bottom: var(--wds-marketing-layout-image-padding-vertical-small, var(--wds-space-400, 24px));
    padding-left: var(--wds-marketing-layout-image-padding-left-small, var(--wds-space-400, 24px));
    padding-right: var(--wds-marketing-layout-image-padding-right-small, var(--wds-space-500, 30px));
  }

  &--image-padding
    &__image-wrapper#{&}__image-wrapper--size-medium#{&}__image-wrapper--inverted {
    padding-left: var(--wds-marketing-layout-image-padding-right-medium, var(--wds-space-700, 30px));
    padding-right: var(--wds-marketing-layout-image-padding-right-medium, var(--wds-space-700, 30px));
  }

  &--image-padding
    &__image-wrapper--size-medium {
    padding: var(--wds-marketing-layout-image-padding-vertical-medium, var(--wds-space-400, 24px))
      var(--wds-marketing-layout-image-padding-right-medium, var(--wds-space-700, 30px));
  }

  &--image-padding#{&}--direction-vertical &__image-wrapper {
    padding: var(--wds-marketing-layout-image-hug-padding, var(--wds-space-0, 0px));
  }

  /* Themes that disallow a full-bleed image keep the wrapper inset even when imagePadding is off. */
  &--direction-horizontal:not(#{&}--image-padding) &__image-wrapper {
    padding: var(--wds-marketing-layout-image-hug-padding, var(--wds-space-0, 0px));
  }

  &--direction-vertical:not(#{&}--image-padding) &__image-wrapper {
    padding: var(--wds-marketing-layout-image-hug-padding, var(--wds-space-0, 0px));
  }

  &__image-placeholder {
    background-color: transparent;
    height: 100%;
  }

  &--badge#{&}--image-padding#{&}--direction-horizontal
    &__image-background {
    margin: 0px;
  }

  &--badge#{&}--direction-horizontal &__image-background,
  &--hidden-badge#{&}--direction-horizontal &__image-background {
    margin: calc(-1 * var(#{$badge-padding})) 0px;
  }
}