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

@mixin hide {
  display: none;
}

@mixin modal {
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin position {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

@mixin overlay($settings: config.$overlay) {
  @include generate.css-map($settings);

  width: 0;
  height: 0;
  z-index: config.$overlay-z-index;
  opacity: 0;
  transform: scale(1.1, 1.1);
  transition:
    opacity config.$overlay-e,
    transform config.$overlay-e;
  backface-visibility: hidden;
}

@mixin overlay-active {
  width: 100% !important;
  height: 100% !important;
  opacity: 1;
  transform: scale(1, 1);
  transition-delay: 0s;
}

@mixin dialog($settings: config.$dialog, $offset: config.$dialog-offset) {
  display: flex;
  flex-flow: column;
  overflow: auto;
  border-radius: convert.to-rem(18px);
  -webkit-overflow-scrolling: touch;

  @include generate.css-map($settings);

  @each $breakpoint, $value in $offset {
    @include breakpoint.get($breakpoint) {
      max-height: calc(100% - #{$value * 2});
      width: calc(100% - #{$value * 2});
    }
  }
}

@mixin dialog-width($size, $sizes: config.$dialog-sizes) {
  $dialog-size: map.get(config.$dialog-sizes, $size);

  max-width: $dialog-size;
}

@mixin body() {
  width: 100%;
  flex: 0 0 auto;

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

@mixin header {
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  padding-bottom: convert.to-rem(3px); // body starts 10px from close icon edge
  background: var(--color-surface-primary);

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

  .divider {
    padding: 0;
  }

  &:has(.divider) {
    padding-bottom: 0;
  }
}

@mixin close {
  position: absolute;
  top: convert.to-rem(20px);
  right: convert.to-rem(20px);
  margin-bottom: 0 !important;

  @include breakpoint.get("xs", "down") {
    top: convert.to-rem(10px);
    right: convert.to-rem(10px);
  }
}

@mixin header-spacing($size, $sizes: config.$spacing) {
  $spacing: map.get($sizes, $size);

  &:not(.modal__header--no-spacing) {
    @each $breakpoint, $space in $spacing {
      @include breakpoint.get($breakpoint) {
        padding: $space;
      }
    }
  }
}

@mixin body-spacing-top($size, $sizes: config.$spacing) {
  $spacing: map.get($sizes, $size);
  @each $breakpoint, $space in $spacing {
    @include breakpoint.get($breakpoint) {
      padding-top: $space;
    }
  }
}

@mixin body-spacing($size, $sizes: config.$spacing) {
  $spacing: map.get($sizes, $size);

  &:not(.modal__body--no-spacing) {
    @each $breakpoint, $space in $spacing {
      @include breakpoint.get($breakpoint) {
        padding-left: $space;
        padding-right: $space;
      }
    }
  }

  &:not(.modal__body--colorful):not(.modal__body--no-spacing) {
    @each $breakpoint, $space in $spacing {
      @include breakpoint.get($breakpoint) {
        padding-bottom: $space;
      }
    }
  }

  &:has(+ .modal__footer--sticky) {
    @each $breakpoint, $space in $spacing {
      @include breakpoint.get($breakpoint) {
        padding-bottom: 0;
      }
    }
  }
}

@mixin colorful-body(
  $size,
  $sizes: config.$spacing,
  $sticky-footer-selector: ".modal__footer--sticky"
) {
  $spacing: map.get($sizes, $size);

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

  + #{$sticky-footer-selector} {
    margin-top: 0;
  }
}

@mixin footer-base() {
  width: 100%;
  flex: 0 0 auto;

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

  .divider {
    padding: 0;
  }
}

@mixin footer-spacing($size, $sizes: config.$spacing) {
  $spacing: map.get($sizes, $size);

  &:not(.modal__footer--no-spacing) {
    @each $breakpoint, $space in $spacing {
      @include breakpoint.get($breakpoint) {
        padding-top: 0;
        padding-right: $space;
        padding-bottom: $space;
        padding-left: $space;

        @at-root {
          .modal__body--colorful + .modal__footer {
            padding: $space;
          }
        }
      }
    }
  }
}

@mixin sticky-footer() {
  z-index: 1;

  @media screen and (min-height: 500px) {
    position: sticky;
    bottom: 0;
    background-color: var(--color-surface-primary);
  }

  &.modal__footer--no-spacing {
    padding: 0 !important;
  }
}

@mixin modal-product-header($spacing) {
  flex: 0 1 auto;

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

@mixin modal-product-footer() {
  display: flex;
  align-items: center;
  gap: convert.to-rem(20px);

  @include breakpoint.get("md") {
    gap: convert.to-rem(30px);
  }

  @include breakpoint.get("xs", "down") {
    flex-direction: column;
  }

  @each $breakpoint,
    $value in map.get(config.$spacing-product-footer, "default")
  {
    @include breakpoint.get($breakpoint) {
      padding: $value;
    }
  }
}

@mixin modal-product-footer-content() {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: convert.to-rem(7px);

  @include breakpoint.get("xs", "down") {
    flex-direction: row-reverse;
    align-items: center;
    width: 100%;
    justify-content: space-between;
  }
}

@mixin modal-product-footer-button() {
  @include breakpoint.get("xs", "down") {
    width: 100%;

    .btn {
      width: 100%;
    }
  }
}

@mixin modal-product-image() {
  object-fit: cover;
  object-position: left;
  max-width: convert.to-rem(125px);
  width: auto;
  height: auto;
  aspect-ratio: auto;

  @include breakpoint.get("sm", "down") {
    max-width: convert.to-rem(62.5px);
  }
}