@use "sass:map";
@use "sass:math";
@use "../../../styles/tokens/breakpoint";
@use "../../../styles/tokens/color";
@use "../../../styles/tokens/space";
@use "../../../styles/tools/convert";
@use "./config";

// image margin needs to be the exact width of content and scticker columns to fit ritght under
@function calculate-image-margin($content-column-width, $sticker-column-width) {
  @return (
      round-to-sass-precision(math.div(100, 12) * $content-column-width) +
        round-to-sass-precision(math.div(100, 12) * $sticker-column-width)
    ) *
    -1%;
}

// sass rounds numbers only after doing math, which caused problem with rounding column widths resulting in 0.00001% causing major layout issues.
@function round-to-sass-precision($number) {
  @return math.div(math.round($number * 100000), 100000);
}

@mixin base {
  overflow: hidden;
  max-width: 100%;
  background-color: var(--color-background-primary);
  color: var(--color-text-default);

  > * {
    @include breakpoint.get("md", "only") {
      max-width: convert.to-rem(764px);
    }
  }
}

@mixin content($config: config.$spacing) {
  > *:last-child {
    margin-bottom: 0 !important;
  }

  @include breakpoint.get("lg") {
    position: relative;
    z-index: 1;
  }

  @each $breakpoint, $space in $config {
    @include breakpoint.get($breakpoint) {
      padding-top: $space;
      padding-bottom: $space;
    }
  }
}

@mixin description {
  line-height: convert.to-rem(22px) !important;
  margin-bottom: space.get();

  @include breakpoint.get("lg") {
    margin-bottom: space.get("large");
  }
}

@mixin price {
  // color: var(--color-surface-secondary);
  margin-bottom: space.get("small");
}

@mixin sticker {
  margin: 0 auto;
}

@mixin image-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: 100%;
  max-width: 100%;

  @include breakpoint.get("lg") {
    position: relative;
    justify-content: flex-end;
    z-index: 0;
    margin-left: calculate-image-margin(5, 2);
  }

  // Try to fix image pixelated rendering on Safari iOS
  img,
  picture {
    image-rendering: crisp-edges;
  }
}

@mixin gradient-overlay {
  position: relative;
  display: inline-block;
  color: var(--color-background-primary);
  @include breakpoint.get("lg") {
    &::after {
      content: "";
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      box-shadow: inset -20px 0 15px -8px;
    }
  }
}

@mixin gradient-overlay-halfwidth {
  @include breakpoint.get("lg") {
    &::after {
      box-shadow:
        inset 20px 0 15px -8px,
        inset -20px 0 15px -8px;
      background-image: none !important;
    }
  }
}

@mixin image {
  height: auto;
  max-width: 100%;
  margin-bottom: 0 !important;

  @include breakpoint.get("lg") {
    margin-left: space.get("small");
    margin-right: space.get("small");
  }
}

@mixin image-fullwidth {
  @include breakpoint.get("lg") {
    margin-left: convert.to-rem(-32px);
    margin-right: convert.to-rem(-32px);
    max-width: calc(100% + #{convert.to-rem(64px)});
  }
  @include breakpoint.get("xl") {
    margin-left: convert.to-rem(-40px);
    margin-right: convert.to-rem(-40px);
    max-width: calc(100% + #{convert.to-rem(80px)});
  }
}

@mixin image-single {
  display: flex;
  width: 100%;
  padding-left: space.get("small");
  padding-right: space.get("small");
  justify-content: center;
  align-items: flex-end;
  height: auto;
  max-height: 540px;

  @include breakpoint.get("lg") {
    aspect-ratio: auto;
    width: 470px;
    height: 540px;
  }

  @include breakpoint.get("xl") {
    width: 590px;
    height: 530px;
  }

  @include breakpoint.get("xxl") {
    width: 650px;
    height: 540px;
  }
}