@use "./config";
@use "../../../styles/tools/generate";
@use "../../../styles/tools/layout";
@use "../../../styles/tools/convert";
@use "../../../styles/tokens/space";
@use "../../../styles/tokens/breakpoint";

@mixin card-base($base: config.$card-base) {
  position: relative;
  display: flex;
  flex-direction: column;

  > *:not([class*="mb-"]) {
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .divider {
    padding: 0;
  }

  @include generate.css-map($base);
}

@mixin card-spacing($spacing) {
  flex: 0 1 auto;

  @if ($spacing == null) {
    @each $breakpoint, $value in config.$spacing {
      @include breakpoint.get($breakpoint) {
        padding: $value;
      }
    }
  } @else {
    padding: $spacing;
  }
}

@mixin card-section($spacing) {
  @include card-spacing($spacing);
  @include layout.reset-last-child-margin-bottom;
}

@mixin card-section-actions() {
  > {
    .btn,
    button {
      width: 100%;

      &:not(:last-child) {
        margin-bottom: space.get("small");
      }
    }
  }

  > *:last-child {
    margin-bottom: 0;
  }
}

@mixin card-section-fill() {
  flex-grow: 1;
}

@mixin card-product-header($spacing) {
  @include card-spacing($spacing);
}

@mixin card-product-image() {
  object-fit: cover;
  object-position: left;
  max-width: convert.to-rem(125px);
}