$font-family: Madefor, 'Helvetica Neue', Helvetica, Arial, 'メイリオ', 'meiryo', 'ヒラギノ角ゴ pro w3', 'hiragino kaku gothic pro', sans-serif;
$shadow20: 0 2px 4px 0 rgba(22, 45, 61, 0.12), 0 0 6px 0 rgba(22, 45, 61, 0.12);
$shadow30: 0 6px 6px 0 rgba(22, 45, 61, 0.06), 0 0 18px 0 rgba(22, 45, 61, 0.12);

$title-line-height-medium-heading: var(--wds-card-gallery-item-title-font-line-height-medium, var(--wds-font-line-height-heading-4, 24px));
$title-line-height-medium-text: var(--wds-card-gallery-item-title-font-line-height-medium, var(--wds-font-line-height-heading-4, 18px));
$title-line-height-small-heading: var(--wds-card-gallery-item-title-font-line-height-small, var(--wds-font-line-height-body-small, 24px));
$title-line-height-small-text: var(--wds-card-gallery-item-title-font-line-height-small, var(--wds-font-line-height-body-small, 18px));
$title-font-size-medium: var(--wds-card-gallery-item-title-font-size-medium, var(--wds-font-size-body-small, 14px));
$title-font-weight-medium: var(--wds-card-gallery-item-title-font-weight-medium, var(--wds-font-weight-medium, 530));
$title-heading-font-weight-medium: var(--wds-card-gallery-item-title-font-heading-weight-medium, var(--wds-font-weight-heading-4, 530));
$title-heading-letter-spacing-medium: var(--wds-card-gallery-item-title-font-heading-letter-spacing-medium, var(--wds-font-letter-spacing-heading-4, unset));
$title-font-weight-small: var(--wds-card-gallery-item-title-font-weight-small, var(--wds-font-weight-medium, 530));
$title-font-family: var(--wds-card-gallery-item-title-font-family, var(--wds-font-family-default, #{$font-family}));
$title-letter-spacing: var(--wds-card-gallery-item-title-font-letter-spacing, var(--wds-font-letter-spacing-0, unset));
$title-gap: var(--wds-card-gallery-item-title-gap, 0px);
$subtitle-font-size-medium: var(--wds-card-gallery-item-subtitle-font-size-medium, var(--wds-font-size-body-small, 14px));
$subtitle-line-height-medium: var(--wds-card-gallery-item-subtitle-line-height-medium, var(--wds-font-line-height-body-small, 18px));
$subtitle-side-font-size-medium: var(--wds-card-gallery-item-subtitle-side-font-size-medium, var(--wds-font-size-body-tiny, 12px));
$image-border-radius-bottom: var(--wds-card-gallery-item-image-border-radius-bottom, var(--wds-border-radius-0, 0));
$image-inset: var(--wds-card-gallery-item-image-inset, var(--wds-space-0, 0px));
$badge-offset-inline: var(--wds-card-gallery-item-badge-offset-inline, -6px);
$badge-offset-block: var(--wds-card-gallery-item-badge-offset-block, 12px);
/* stylelint-disable-next-line plugin/use-baseline */
$overlay-hover-fill: var(--wds-card-gallery-item-overlay-hover-fill, var(--wds-color-fill-transparent-primary, color-mix(in srgb, #000624 66%, transparent)));
$overlay-backdrop-filter: var(--wds-card-gallery-item-overlay-backdrop-filter, none);
$image-side-size-medium: var(--wds-card-gallery-item-image-side-size-medium, 40px);
$image-side-size-small: var(--wds-card-gallery-item-image-side-size-small, 30px);
$drag-handle-gap: var(--wds-card-gallery-item-drag-handle-gap, 12px);
$actions-direction: var(--wds-card-gallery-item-actions-direction, row);
$actions-align: var(--wds-card-gallery-item-actions-align, stretch);
$actions-secondary-position: var(--wds-card-gallery-item-actions-secondary-position, absolute);
$secondary-action-font-size: var(--wds-card-gallery-item-secondary-action-font-size, var(--wds-font-size-body-medium, 16px));
$secondary-action-line-height: var(--wds-card-gallery-item-secondary-action-line-height, var(--wds-font-line-height-body-medium, 24px));
$secondary-action-height: var(--wds-card-gallery-item-secondary-action-height, 24px);
$secondary-action-min-width: var(--wds-card-gallery-item-secondary-action-min-width, auto);
$secondary-action-border-radius: var(--wds-card-gallery-item-secondary-action-border-radius, 2px);
$secondary-action-padding-vertical: var(--wds-card-gallery-item-secondary-action-padding-vertical, 0px);
$secondary-action-padding-horizontal: var(--wds-card-gallery-item-secondary-action-padding-horizontal, 0px);
$secondary-action-fill-hover: var(--wds-card-gallery-item-secondary-action-fill-hover, transparent);
$secondary-action-fill-active: var(--wds-card-gallery-item-secondary-action-fill-active, transparent);
$secondary-action-color-hover: var(--wds-card-gallery-item-secondary-action-color-hover, var(--wds-color-fill-light-primary, #ffffff));
$secondary-action-color-active: var(--wds-card-gallery-item-secondary-action-color-active, var(--wds-color-fill-light-primary, #ffffff));
$actions-clearance-top: var(--wds-card-gallery-item-actions-clearance-top, var(--wds-space-200, 12px));
$actions-clearance-bottom: var(--wds-card-gallery-item-actions-clearance-bottom, var(--wds-space-200, 12px));
$settings-menu-offset: var(--wds-card-gallery-item-settings-menu-offset, var(--wds-space-200, 12px));
$action-button-size: var(--wds-card-gallery-item-action-button-size, var(--wds-button-size-medium, 36px));
$action-button-min-width: var(--wds-card-gallery-item-action-button-min-width, 84px);
$action-button-border-radius: var(--wds-card-gallery-item-action-button-border-radius, var(--wds-button-border-radius-medium, 18px));
$action-button-padding-vertical: var(--wds-card-gallery-item-action-button-padding-vertical, var(--wds-button-padding-vertical-medium, 6px));
$action-button-padding-horizontal: var(--wds-card-gallery-item-action-button-padding-horizontal, var(--wds-button-padding-horizontal-medium, 24px));
$action-button-font-size: var(--wds-card-gallery-item-action-button-font-size, var(--wds-button-font-size-medium, 16px));
$action-button-line-height: var(--wds-card-gallery-item-action-button-line-height, var(--wds-button-font-line-height-medium, 24px));
$outline-border-color: var(--wds-card-gallery-item-outline-border-color, var(--wds-color-blue-400, #d6e6fe));
$outline-border-color-hover: var(--wds-card-gallery-item-outline-border-color-hover, var(--wds-color-blue-300, #a8caff));
$base-shadow: var(--wds-card-gallery-item-base-shadow, var(--wds-card-base-shadow, none));
$shadow: var(--wds-card-gallery-item-shadow, var(--wds-card-shadow, #{$shadow20}));
$shadow-hover: var(--wds-card-gallery-item-shadow-hover, var(--wds-card-shadow, #{$shadow20}));
$shadow-hover-side: var(--wds-card-gallery-item-shadow-hover-side, #{$shadow30});
$buttons-gap: var(--wds-card-gallery-item-buttons-gap, 6px);
$padding-vertical-medium: var(--wds-card-gallery-item-padding-vertical-medium, var(--wds-space-300, 18px));
$padding-vertical-small: var(--wds-card-gallery-item-padding-vertical-small, var(--wds-space-200, 12px));
$padding-right-medium: var(--wds-card-gallery-item-padding-right-medium, var(--wds-space-400, 24px));
$padding-right-small: var(--wds-card-gallery-item-padding-right-small, var(--wds-space-300, 18px));
$padding-left-medium: var(--wds-card-gallery-item-padding-left-medium, var(--wds-space-300, 18px));
$padding-left-small: var(--wds-card-gallery-item-padding-left-small, var(--wds-space-200, 12px));

.card-gallery-item {
  position: relative;
  flex: 1 0;
  min-width: 0;
  height: 100%;

  &--show-actions {
    cursor: pointer;
  }

  &:focus-visible {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: none;
    box-shadow: 0 0 0 3px var(--wds-color-blue-300, #a6d0ff);
  }

  &#{&}--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;
  }

  /*
    With a badge present, the hover layer skips the badge strip at the top so
    the action buttons centre in the space that is left below it.
  */
  &#{&}--has-badge#{&}--image-placement-top &__overlay .media-overlay__overlay--layer-hover {
    padding-top: $actions-clearance-top;
    padding-bottom: $actions-clearance-bottom;
  }

  /*
    When the secondary action is in flow rather than absolutely positioned, the
    whole pair is what gets centred over the media instead of just the button.
  */
  & &__primary-action {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: $actions-direction;
    align-items: $actions-align;
    justify-content: center;
  }

  /* Chained under the root so it out-ranks Button's own size rules. */
  &#{&}--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;
    top: 100%;
    display: flex;
    justify-content: center;
    padding-top: $buttons-gap;
  }

  /*
    Token-driven tertiary-button look: in harmony (odeditor) these tokens turn
    the text button into a tertiary button; everywhere else they resolve to the
    text button's own values, so nothing changes.
  */
  /* Chained under the root so it out-ranks TextButton's own size rules. */
  &#{&}--show-actions &__action-text-button {
    font-size: $secondary-action-font-size;
    line-height: $secondary-action-line-height;
    height: $secondary-action-height;
    min-width: $secondary-action-min-width;
    border-radius: $secondary-action-border-radius;
    padding: $secondary-action-padding-vertical $secondary-action-padding-horizontal;
  }

  @media (hover: hover) {
    &#{&}--show-actions &__action-text-button:hover {
      background-color: $secondary-action-fill-hover;
      color: $secondary-action-color-hover;
    }
  }

  &#{&}--show-actions &__action-text-button:active {
    background-color: $secondary-action-fill-active;
    color: $secondary-action-color-active;
  }

  & &__bottom-actions {
    display: none;
    flex-direction: column;
    padding: 0 $padding-right-medium $padding-right-medium;
  }

  &:not(&--with-footer) &__bottom-actions {
    padding-top: $padding-right-medium;
  }

  &#{&}--size-small &__bottom-actions {
    padding: 0 $padding-right-small $padding-right-small;
  }

  &#{&}--size-small:not(&--with-footer) &__bottom-actions {
    padding-top: $padding-right-small;
  }

  & &__bottom-secondary-action {
    display: flex;
    justify-content: center;
    padding-top: $buttons-gap;
  }

  & &__container {
    height: 100%;
  }

  & &__footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: $padding-vertical-medium $padding-right-medium;
  }

  &#{&}--image-placement-top &__footer &__settings-menu {
    padding-left: 6px;
  }

  @media (hover: hover) {
    &#{&}--image-placement-top:not(&--mobile) &__settings-menu {
      position: absolute;
      top: $settings-menu-offset;
      inset-inline-end: $settings-menu-offset;
      padding-left: 0;
      opacity: 0;
      pointer-events: none;
      transition: opacity 200ms ease-in-out;
    }

    /* Same inset compensation as the badge, so the button stays inside the image. */
    &#{&}--with-footer#{&}--image-placement-top:not(&--mobile) &__settings-menu {
      top: calc(#{$settings-menu-offset} + #{$image-inset});
      inset-inline-end: calc(#{$settings-menu-offset} + #{$image-inset});
    }

    &#{&}--image-placement-top:not(&--mobile):not(&--show-actions) &__settings-menu {
      display: none;
    }

    &#{&}--image-placement-top:not(&--mobile)#{&}--show-actions &__container:hover &__settings-menu,
    &#{&}--image-placement-top:not(&--mobile) &__settings-menu:focus-within {
      opacity: 1;
      pointer-events: auto;
    }
  }

  @media (hover: none) {
    &#{&}--image-placement-top &__card-container > &__settings-menu {
      display: none;
    }
  }

  &#{&}--mobile#{&}--image-placement-top &__card-container > &__settings-menu {
    display: none;
  }

  &#{&}--image-placement-side:not(&--suffix) &__settings-menu {
    padding-left: 12px;
  }

  &#{&}--image-placement-side#{&}--suffix &__settings-menu {
    padding-left: 6px;
  }

  &#{&}--image-placement-side &__footer-suffix {
    padding-left: 12px;
  }

  &#{&}--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 {
    display: flex;
    flex-direction: column;
    flex: 1 0;
    min-width: 0;
    row-gap: $title-gap;
  }

  & &__footer-image {
    margin-right: 12px;
    height: $image-side-size-medium;
    width: $image-side-size-medium;
  }

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

  & &__footer-suffix {
    flex: 0 1;
    padding-left: 24px;
    color: var(--wds-color-text-standard-primary, #000624);
  }

  &#{&}--show-suffix-on-hover &__footer-suffix {
    display: none;
  }

  @media (hover: hover) {
    &#{&}--show-suffix-on-hover:hover &__footer-suffix {
      display: block;
    }
  }

  @media (hover: none) {
    &#{&}--show-suffix-on-hover &__footer-suffix {
      display: block;
    }
  }

  &#{&}--mobile#{&}--show-suffix-on-hover &__footer-suffix {
    display: block;
  }

  &#{&}--size-small:not(&--image-placement-side) &__footer-suffix {
    padding-left: 18px;
  }

  & &__badge-wrapper {
    position: absolute;
    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});
  }

  & &__drag-handle-wrapper {
    margin-right: 12px;
  }

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

  & &__drag-handle-floating-wrapper {
    position: absolute;
    left: 12px;
    bottom: 15px;
  }

  &:not(:hover) &__drag-handle-floating-wrapper {
    display: none;
  }

  /* Chained under the root so the shadow ladder out-ranks Card's own rules. */
  & &__card-container#{&}__card-container--skin-standard,
  & &__card-container#{&}__card-container--skin-outlined {
    box-shadow: $base-shadow;
  }

  & &__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-heading;
    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-text;
    font-weight: $title-font-weight-medium;
    font-family: $title-font-family;
    letter-spacing: $title-letter-spacing;
  }

  &#{&}--size-small &__title-heading#{&}__title-heading {
    line-height: $title-line-height-small-heading;
  }

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

  @media (hover: hover) {
    /* Override DraggableContainer hover background to prevent it from showing through rounded corners */
    &#{&}#{&}--draggable:not(&--drag-disabled):hover,
    &#{&}#{&}--dragging:not(&--drag-disabled):hover {
      background-color: transparent;
    }
  }

  @media (hover: none) {
    &#{&}--image-placement-top &__bottom-actions {
      display: flex;
    }
  }

  &#{&}--mobile#{&}--image-placement-top &__bottom-actions {
    display: flex;
  }
}