@use '../core/styles' as sbb;

$theme: 'standard' !default;

@mixin base {
  --sbb-flip-card-background-color: var(--sbb-background-color-4);
  --sbb-flip-card-border: var(--sbb-border-width-2x);
  --sbb-flip-card-border-radius: var(--sbb-border-radius-4x);
  --sbb-flip-card-button-dimensions: var(--sbb-button-min-height-size-s);
  --sbb-flip-card-padding: var(--sbb-spacing-responsive-s);
  --sbb-flip-card-padding-block-end: var(--sbb-spacing-responsive-xs);
  --sbb-flip-card-min-height: #{sbb.px-to-rem-build(280)};
  --sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);
}

@mixin breakpoint-large {
  --sbb-flip-card-min-height: #{sbb.px-to-rem-build(320)};
}

@mixin rules {
  // Every element in the Light DOM of a sbb-flip-card which is focusable should receive this attribute.
  // This style enables accessing focusable elements inside an sbb-card.
  sbb-flip-card .sbb-action {
    pointer-events: all;
  }

  sbb-flip-card-summary {
    > [slot='image']:is(sbb-image, img),
    > [slot='image'] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
      --sbb-image-aspect-ratio: auto;
      --sbb-image-object-fit: cover;

      border-radius: 0;
      display: block;
      height: 100%;
    }
  }
}