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

@layer components {
  .modal {
    @include mixins.position;
    @include mixins.modal;

    &[aria-hidden="true"] {
      @include mixins.hide;
    }
  }

  .modal__overlay {
    @include mixins.position;
    @include mixins.overlay;

    .modal.is-active & {
      @include mixins.overlay-active;
    }
  }

  .modal__dialog {
    @include mixins.dialog;

    @each $size, $props in config.$dialog-sizes {
      &#{generate.variant-name($size)} {
        @include mixins.dialog-width($size);
      }
    }
  }

  .modal__header {
    @include mixins.header;

    @each $size, $props in config.$spacing {
      .modal__dialog#{generate.variant-name($size)} & {
        @include mixins.header-spacing($size);
      }
    }
  }

  .modal__close {
    @include mixins.close;
  }

  .modal__body {
    @include mixins.body();

    @each $size, $props in config.$spacing {
      .modal__dialog#{generate.variant-name($size)} & {
        @include mixins.body-spacing($size);
      }

      .modal__dialog#{generate.variant-name($size)} > &--with-top-padding {
        @include mixins.body-spacing-top($size);
      }
    }

    &--colorful {
      @each $size, $props in config.$spacing {
        .modal__dialog#{generate.variant-name($size)} & {
          @include mixins.colorful-body($size);
        }
      }
    }
  }

  .modal__dialog--full-height .modal__body {
    flex: 1;
  }

  @include breakpoint.get("xs", "down") {
    .modal__dialog--full-height {
      height: calc(100% - 2.5rem);
    }
  }

  .modal__footer {
    @include mixins.footer-base();

    @each $size, $props in config.$spacing {
      .modal__dialog#{generate.variant-name($size)} & {
        @include mixins.footer-spacing($size);
      }
    }

    &--sticky {
      @include mixins.sticky-footer();

      $spacing: map.get(config.$spacing, "default");

      @each $breakpoint, $space in $spacing {
        @include breakpoint.get($breakpoint) {
          padding: $space !important;
        }
      }
    }
  }

  .modal__product {
    &-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;

      > img {
        @include mixins.modal-product-image;
      }
    }

    &-content {
      @include mixins.modal-product-header(null);
    }
  }

  .modal__product-header--space-small .modal__product-content {
    @include mixins.modal-product-header(space.get());
  }

  .modal__product-footer {
    @include mixins.modal-product-footer();
  }

  .modal__product-footer-content {
    @include mixins.modal-product-footer-content();
  }

  .modal__product-footer-button {
    @include mixins.modal-product-footer-button();
  }
}