@use '../core/functions';
@use '../core/mediaqueries';
@use './a11y';
@use './buttons';
@use './shadows';
@use './typo';

// -----------------------------------------------------------------------------
// Card: Mixins & CSS custom properties
// -----------------------------------------------------------------------------

@mixin card-variables {
  --sbb-card-background-color: var(--sbb-color-white);
  --sbb-card-border-radius: var(--sbb-border-radius-4x);
  --sbb-card-animation-duration: var(
    --sbb-disable-animation-time,
    var(--sbb-animation-duration-1x)
  );
  --sbb-card-animation-easing: var(--sbb-animation-easing);
  --sbb-card-border-color: transparent;
  --sbb-card-border-style: solid;
  --sbb-card-hover-shift: 0;

  // As the card has always a white/milk background, we have to fix the focus outline color
  // to default color for cases where the card is used in a negative context.
  --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);

  @include a11y.if-forced-colors {
    --sbb-card-border-color: CanvasText;
    --sbb-card-border-width: var(--sbb-border-width-2x);
  }
}

@mixin card-variables--milk {
  --sbb-card-background-color: var(--sbb-color-milk);
  --sbb-card-border-color: transparent;
}

@mixin card-variables--transparent-bordered {
  --sbb-card-background-color: transparent;
  --sbb-card-border-color: var(--sbb-color-cloud);
  --sbb-card-border-width: var(--sbb-border-width-1x);
  --sbb-focus-outline-color: inherit;
}

@mixin card-variables--transparent-bordered-dashed {
  --sbb-card-background-color: transparent;
  --sbb-card-border-color: var(--sbb-color-cement);
  --sbb-card-border-width: var(--sbb-border-width-1x);
  --sbb-card-border-style: dashed;
  --sbb-focus-outline-color: inherit;
}

@mixin card-variables--active {
  --sbb-card-border-color: var(--sbb-color-charcoal);
  --sbb-card-border-width: var(--sbb-border-width-2x);
  --sbb-card-border-style: solid;

  @include a11y.if-forced-colors {
    --sbb-card-border-color: Highlight;
  }
}

// Card sizing
@mixin card-variables--xs {
  --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);
  --sbb-card-padding-block-start: var(--sbb-spacing-fixed-3x);
  --sbb-card-padding-block-end: var(--sbb-card-padding-block-start);
}

@mixin card-variables--s {
  --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);
  --sbb-card-padding-block-start: var(--sbb-spacing-responsive-xxxs);
  --sbb-card-padding-block-end: var(--sbb-card-padding-block-start);
}

@mixin card-variables--m {
  --sbb-card-padding-inline: var(--sbb-spacing-responsive-s);
  --sbb-card-padding-block-start: var(--sbb-spacing-responsive-xxxs);
  --sbb-card-padding-block-end: var(--sbb-card-padding-block-start);
}

@mixin card-variables--m-has-badge {
  --sbb-card-padding-block-start: var(--sbb-spacing-fixed-6x);
  --sbb-card-padding-block-end: var(--sbb-spacing-responsive-xxxs);
}

@mixin card-variables--l {
  --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);
  --sbb-card-padding-block-start: var(--sbb-spacing-fixed-4x);
  --sbb-card-padding-block-end: var(--sbb-card-padding-block-start);
}

@mixin card-variables--l-has-badge {
  --sbb-card-padding-block-start: var(--sbb-spacing-fixed-6x);
  --sbb-card-padding-block-end: var(--sbb-spacing-fixed-4x);
}

@mixin card-variables--xl {
  --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);
  --sbb-card-padding-block-start: var(--sbb-spacing-responsive-xxs);
  --sbb-card-padding-block-end: var(--sbb-card-padding-block-start);
}

@mixin card-variables--xl-has-badge {
  --sbb-card-padding-block-start: var(--sbb-spacing-fixed-6x);
  --sbb-card-padding-block-end: var(--sbb-spacing-responsive-xxs);
}

@mixin card-variables--xxl {
  --sbb-card-padding-inline: var(--sbb-spacing-responsive-s);
  --sbb-card-padding-block-start: var(--sbb-spacing-responsive-s);
  --sbb-card-padding-block-end: var(--sbb-card-padding-block-start);
}

@mixin card-variables--xxxl {
  --sbb-card-padding-inline: var(--sbb-spacing-responsive-l);
  --sbb-card-padding-block-start: var(--sbb-spacing-responsive-l);
  --sbb-card-padding-block-end: var(--sbb-card-padding-block-start);
}

@mixin card-variables--button {
  @include a11y.if-forced-colors {
    --sbb-card-color: ButtonText;
  }
}

@mixin card-variables--link {
  @include a11y.if-forced-colors {
    --sbb-card-color: LinkText;
  }
}

@mixin card {
  display: block;
  position: relative;
  padding-inline: var(--sbb-card-padding-inline);
  padding-block: var(--sbb-card-padding-block-start) var(--sbb-card-padding-block-end);
  border-radius: var(--sbb-card-border-radius);
  background-color: var(--sbb-card-background-color);
  box-shadow: none;
  transition: box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);
  color: var(--sbb-card-color);

  // Apply border as after element to let it be inline
  &::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: transparent;
    border: var(--sbb-card-border-width) var(--sbb-card-border-style) var(--sbb-card-border-color);
    border-radius: var(--sbb-card-border-radius);
    pointer-events: none;
  }
}

@mixin card--hover($cardSelector) {
  @include mediaqueries.hover-mq($hover: true) {
    --sbb-card-hover-shift: #{functions.px-to-rem-build(-2)};

    #{$cardSelector} {
      @include shadows.shadow-level-9-hard;
    }

    @include a11y.if-forced-colors {
      --sbb-card-border-color: Highlight;
    }
  }
}

@mixin card--wrapper {
  display: block;
  height: 100%;
}