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

$title-line-height-medium: var(--wds-card-gallery-item-title-font-line-height-medium, var(--wds-font-line-height-body-medium, 24px));
$title-font-size-medium: var(--wds-card-gallery-item-title-font-size-medium, var(--wds-font-size-body-medium, 16px));
$title-font-weight-medium: var(--wds-card-gallery-item-title-font-weight-medium, var(--wds-font-weight-heading-3, 700));
$title-heading-font-weight-medium: var(--wds-card-gallery-item-title-font-heading-weight-medium, var(--wds-font-weight-heading-3, 700));
$title-heading-letter-spacing-medium: var(--wds-card-gallery-item-title-font-heading-letter-spacing-medium, var(--wds-font-letter-spacing-heading-3, -0.5px));
$title-font-weight-small: var(--wds-card-gallery-item-title-font-weight-small, var(--wds-font-weight-heading-3, 700));
$title-font-family: var(--wds-card-gallery-item-title-font-family, var(--wds-font-family-display, #{$font-family-display}));
$title-letter-spacing: var(--wds-card-gallery-item-title-font-letter-spacing, var(--wds-font-letter-spacing-heading-3, -0.5px));
$title-gap: var(--wds-card-gallery-item-title-gap, 2px);
$subtitle-font-size-medium: var(--wds-card-gallery-item-subtitle-font-size-medium, var(--wds-font-size-body-tiny, 12px));
$subtitle-line-height-medium: var(--wds-card-gallery-item-subtitle-line-height-medium, var(--wds-font-line-height-body-tiny, 16px));
$subtitle-side-font-size-medium: var(--wds-card-gallery-item-subtitle-side-font-size-medium, var(--wds-font-size-body-small, 14px));
$image-border-radius-bottom: var(--wds-card-gallery-item-image-border-radius-bottom, var(--wds-border-radius-400, 8px));
$image-inset: var(--wds-card-gallery-item-image-inset, var(--wds-space-200, 8px));
$badge-offset-inline: var(--wds-card-gallery-item-badge-offset-inline, var(--wds-space-300, 12px));
$badge-offset-block: var(--wds-card-gallery-item-badge-offset-block, var(--wds-space-300, 12px));
$overlay-hover-fill: var(--wds-card-gallery-item-overlay-hover-fill, rgba(54, 64, 97, 0.52));
$overlay-backdrop-filter: var(--wds-card-gallery-item-overlay-backdrop-filter, blur(28px));
$image-side-size-medium: var(--wds-card-gallery-item-image-side-size-medium, 48px);
$image-side-size-small: var(--wds-card-gallery-item-image-side-size-small, 32px);
$drag-handle-gap: var(--wds-card-gallery-item-drag-handle-gap, 8px);
$actions-direction: var(--wds-card-gallery-item-actions-direction, column);
$actions-align: var(--wds-card-gallery-item-actions-align, center);
$actions-secondary-position: var(--wds-card-gallery-item-actions-secondary-position, static);
$secondary-action-font-size: var(--wds-card-gallery-item-secondary-action-font-size, var(--wds-font-size-body-tiny, 12px));
$secondary-action-line-height: var(--wds-card-gallery-item-secondary-action-line-height, var(--wds-font-line-height-body-tiny, 16px));
$action-button-size: var(--wds-card-gallery-item-action-button-size, var(--wds-space-750, 30px));
$action-button-min-width: var(--wds-card-gallery-item-action-button-min-width, 72px);
$action-button-border-radius: var(--wds-card-gallery-item-action-button-border-radius, var(--wds-border-radius-300, 6px));
$action-button-padding-vertical: var(--wds-card-gallery-item-action-button-padding-vertical, var(--wds-space-150, 6px));
$action-button-padding-horizontal: var(--wds-card-gallery-item-action-button-padding-horizontal, var(--wds-space-400, 16px));
$action-button-font-size: var(--wds-card-gallery-item-action-button-font-size, var(--wds-font-size-body-tiny, 12px));
$action-button-line-height: var(--wds-card-gallery-item-action-button-line-height, var(--wds-font-line-height-body-tiny, 16px));
$outline-border-color: var(--wds-card-gallery-item-outline-border-color, var(--wds-color-black-550, #dedede));
$outline-border-color-hover: var(--wds-card-gallery-item-outline-border-color-hover, var(--wds-color-black-500, #a8a6a5));
$shadow: var(--wds-card-gallery-item-shadow, 0 1px 10px 0 var(--wds-color-black-100-transparent-5, rgba(19, 23, 32, 0.05)), 1px 0 2px -0.7px var(--wds-color-black-100-transparent-5, rgba(19, 23, 32, 0.05)));
$shadow-hover: var(--wds-card-gallery-item-shadow-hover, 0 0 30px 0 var(--wds-color-black-100-transparent-10, rgba(19, 23, 32, 0.1)), 0 20px 0 0 var(--wds-color-black-100-transparent-0, rgba(19, 23, 32, 0)));
$shadow-hover-side: var(--wds-card-gallery-item-shadow-hover-side, 0 0 30px 0 var(--wds-color-black-100-transparent-10, rgba(19, 23, 32, 0.1)), 0 20px 0 0 var(--wds-color-black-100-transparent-0, rgba(19, 23, 32, 0)));
$buttons-gap: var(--wds-card-gallery-item-buttons-gap, var(--wds-space-200, 8px));
$padding-vertical-medium: var(--wds-card-gallery-item-padding-vertical-medium, var(--wds-space-400, 16px));
$padding-vertical-small: var(--wds-card-gallery-item-padding-vertical-small, var(--wds-space-300, 12px));
$padding-right-medium: var(--wds-card-gallery-item-padding-right-medium, var(--wds-space-400, 16px));
$padding-right-small: var(--wds-card-gallery-item-padding-right-small, var(--wds-space-300, 12px));
$padding-left-medium: var(--wds-card-gallery-item-padding-left-medium, var(--wds-space-400, 16px));
$padding-left-small: var(--wds-card-gallery-item-padding-left-small, var(--wds-space-300, 12px));

.card-gallery-item {
  &#{&}--with-footer &__overlay {
    border-bottom-right-radius: $image-border-radius-bottom;
    border-bottom-left-radius: $image-border-radius-bottom;
  }

  &#{&}--with-footer#{&}--image-placement-top &__overlay {
    margin: $image-inset $image-inset 0;
    width: calc(100% - 2 * #{$image-inset});
    height: calc(100% - #{$image-inset});
  }

  &#{&}--image-placement-top &__overlay .media-overlay__overlay--skin-dark {
    background-color: $overlay-hover-fill;
    /* stylelint-disable-next-line plugin/use-baseline */
    backdrop-filter: $overlay-backdrop-filter;
  }

  & &__primary-action {
    flex-direction: $actions-direction;
    align-items: $actions-align;
  }

  &#{&}--show-actions &__action-button {
    height: $action-button-size;
    min-width: $action-button-min-width;
    border-radius: $action-button-border-radius;
    padding: $action-button-padding-vertical $action-button-padding-horizontal;
    font-size: $action-button-font-size;
    line-height: $action-button-line-height;
  }

  & &__secondary-action {
    position: $actions-secondary-position;
    padding-top: $buttons-gap;
  }

  &#{&}--show-actions &__action-text-button {
    font-size: $secondary-action-font-size;
    line-height: $secondary-action-line-height;
  }

  & &__bottom-secondary-action {
    padding-top: $buttons-gap;
  }

  & &__footer {
    padding: $padding-vertical-medium $padding-right-medium;
  }

  &#{&}--size-medium#{&}--draggable &__footer {
    padding: $padding-vertical-medium $padding-right-medium $padding-vertical-medium $padding-left-medium;
  }

  &#{&}--size-small &__footer {
    padding: $padding-vertical-small $padding-right-small;
  }

  &#{&}--size-small#{&}--draggable &__footer {
    padding: $padding-vertical-small $padding-right-small $padding-vertical-small $padding-left-small;
  }

  & &__footer-content {
    row-gap: $title-gap;
  }

  & &__footer-image {
    height: $image-side-size-medium;
    width: $image-side-size-medium;
  }

  & &__footer-image--size-small {
    height: $image-side-size-small;
    width: $image-side-size-small;
  }

  & &__badge-wrapper {
    left: $badge-offset-inline;
    top: $badge-offset-block;
  }

  :global([dir='rtl']) & &__badge-wrapper {
    left: auto;
    right: $badge-offset-inline;
  }

  &#{&}--with-footer#{&}--image-placement-top &__badge-wrapper {
    left: calc(#{$badge-offset-inline} + #{$image-inset});
    top: calc(#{$badge-offset-block} + #{$image-inset});
  }

  :global([dir='rtl']) &#{&}--with-footer#{&}--image-placement-top &__badge-wrapper {
    left: auto;
    right: calc(#{$badge-offset-inline} + #{$image-inset});
  }

  &#{&}--image-placement-side &__drag-handle-wrapper {
    margin-right: $drag-handle-gap;
  }

  & &__card-container#{&}__card-container--skin-standard#{&}__card-container--show-shadow {
    box-shadow: $shadow;
  }

  & &__card-container--skin-outlined#{&}__card-container--skin-visibility-always {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: 1px solid $outline-border-color;
  }

  @media (hover: hover) {
    & &__card-container--skin-outlined#{&}__card-container--is-interactive:hover {
      /* stylelint-disable-next-line plugin/use-baseline */
      outline: 1px solid $outline-border-color-hover;
    }

    & &__card-container#{&}__card-container--skin-standard#{&}__card-container--is-interactive:hover {
      box-shadow: $shadow-hover;
    }

    &#{&}--image-placement-side &__card-container#{&}__card-container--skin-standard#{&}__card-container--is-interactive:hover {
      box-shadow: $shadow-hover-side;
    }
  }

  &#{&}--image-placement-top#{&}--size-medium &__subtitle#{&}__subtitle {
    font-size: $subtitle-font-size-medium;
    line-height: $subtitle-line-height-medium;
  }

  &#{&}--image-placement-side#{&}--size-medium &__subtitle#{&}__subtitle {
    font-size: $subtitle-side-font-size-medium;
  }

  &#{&}--size-medium &__title-heading#{&}__title-heading {
    line-height: $title-line-height-medium;
    font-weight: $title-heading-font-weight-medium;
    letter-spacing: $title-heading-letter-spacing-medium;
  }

  &#{&}--size-medium &__title-text#{&}__title-text {
    font-size: $title-font-size-medium;
    line-height: $title-line-height-medium;
    font-weight: $title-font-weight-medium;
    font-family: $title-font-family;
    letter-spacing: $title-letter-spacing;
  }

  &#{&}--size-small &__title-text#{&}__title-text {
    font-weight: $title-font-weight-small;
    font-family: $title-font-family;
    letter-spacing: $title-letter-spacing;
  }

  /* MediaOverlay keeps data-isvisible='true' whenever the overlay shows
     (hover or focus), so the media zoom tracks the overlay fade exactly.
     Mobile is excluded because there the overlay is always visible.
     Reduced motion keeps the fade, drops the zoom. */

  @container style(--wds-internal-theme: odeditor) {
    &:not(&--mobile) &__overlay .media-overlay__media {
      transition: transform 500ms cubic-bezier(0.25, 1, 0.5, 1);
    }

    &:not(&--mobile) &__overlay[data-isvisible='true'] .media-overlay__media {
      transform: scale(1.08);
    }

    &:not(&--mobile) &__overlay .media-overlay__overlay {
      transition: opacity 300ms cubic-bezier(0.25, 1, 0.5, 1);
    }

    @media (prefers-reduced-motion) {
      &:not(&--mobile) &__overlay[data-isvisible='true'] .media-overlay__media {
        transform: none;
      }
    }
  }
}