$card-shadow: 0 8px 30px 0 rgba(19, 23, 32, 0.1), 0 0 0 0 rgba(19, 23, 32, 0);

$title-line-height-medium: var(--wds-card-gallery-item-title-font-line-height-medium, var(--wds-font-line-height-body-medium, 24px));
$title-line-height-small: var(--wds-card-gallery-item-title-font-line-height-small, var(--wds-font-line-height-body-tiny, 16px));
$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-bold, 600));
$subtitle-font-size-medium: var(--wds-card-gallery-item-subtitle-font-size-medium, var(--wds-font-size-body-tiny, 12px));
$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-600, 12px));
$base-shadow: var(--wds-card-gallery-item-base-shadow, #{$card-shadow});
$shadow: var(--wds-card-gallery-item-shadow, #{$card-shadow});
$shadow-hover: var(--wds-card-gallery-item-shadow-hover, #{$card-shadow});
$buttons-gap: var(--wds-card-gallery-item-buttons-gap, var(--wds-space-200, 8px));
$action-button-size: var(--wds-card-gallery-item-action-button-size, var(--wds-space-950, 38px));
$action-button-border-radius: var(--wds-card-gallery-item-action-button-border-radius, var(--wds-border-radius-400, 8px));
$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-500, 20px));
$action-button-font-size: var(--wds-card-gallery-item-action-button-font-size, var(--wds-font-size-body-small, 14px));
$padding-vertical-medium: var(--wds-card-gallery-item-padding-vertical-medium, var(--wds-space-475, 18px));
$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-600, 24px));
$padding-right-small: var(--wds-card-gallery-item-padding-right-small, var(--wds-space-475, 18px));
$padding-left-medium: var(--wds-card-gallery-item-padding-left-medium, var(--wds-space-475, 18px));
$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;
  }

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

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

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

  & &__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;
  }

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

  &#{&}--image-placement-top#{&}--size-medium &__subtitle#{&}__subtitle {
    font-size: $subtitle-font-size-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;
  }

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

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

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