@use "../../foundations/helpers/forward.helpers.scss" as *;
@use "../../components/icon-sprite/icon-sprite.scss";
@use "../../components/button/button.scss";

body:has(dialog[open]),
body.no-scroll {
  overflow: hidden;
  touch-action: none;
}

.ds-modal.ds-modal--hidden {
  display: none;
}

.ds-modal {

  &--fallback {
    display: flex;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 999;

    &::after {
      content: "";
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: $ds-color-surface-overlay;
      z-index: 10;
    }

    @include ds-mq-only-breakpoint(mobile) {
      align-items: flex-end;
    }

    @include ds-mq-smallest-breakpoint(tablet) {
      align-items: center;
      justify-content: center;
    }

    .ds-modal__inner {
      position: relative;
      overflow: auto;
      max-height: 85vh;
    }
  }

  .ds-modal__inner {
    max-width: 700px;
    max-height: 90dvh;
    overflow-y: auto;
    border: none;
    padding: 0;
    background-color: transparent;

    @include ds-mq-only-breakpoint(mobile) {
      min-width: 100%;
      margin-bottom: 0;
    }

    &::backdrop {
      background-color: $ds-color-surface-overlay;
    }

    &:focus {
      outline: none;
    }
  }

  .ds-modal__content {
    background-color: $ds-color-surface-primary;
    position: relative;
    z-index: 15;

    @include ds-mq-only-breakpoint(mobile) {
      padding: ds-spacing($ds-s-400 $ds-s-100 $ds-s-150);
      border-radius: 16px 16px 0 0;
    }

    @include ds-mq-smallest-breakpoint(tablet) {
      padding: ds-spacing($ds-s-400 $ds-s-300 $ds-s-300);
      border-radius: ds-border-radius(012);
    }

    .ds-btn.ds-modal__close--icon {
      position: absolute;
      top: ds-spacing($ds-s-100);
      right: ds-spacing($ds-s-100);
    }

    > h2 {
      margin: ds-spacing(0 0 $ds-s-200);
      text-align: center;
      @include ds-typography($ds-typography-functional-heading-sm) {
        color: $ds-color-text-primary;
      }
    }

    > p {
      margin: 0;
      text-align: center;
      @include ds-typography($ds-typography-functional-body-md) {
        color: $ds-color-text-primary;
      }
    }

    > .ds-modal__buttons {
      margin: ds-spacing($ds-s-200 0 0);

      @include ds-mq-only-breakpoint(mobile) {
        display: flex;
        flex-wrap: wrap;

        .ds-modal__primary-button:not(:only-child) {
          order: 1;
          margin-bottom: ds-spacing($ds-s-100);
        }

        .ds-modal__secondary-button:not(:only-child) {
          order: 2;
        }
      }

      @include ds-mq-smallest-breakpoint(tablet) {
        display: flex;
        justify-content: center;

        .ds-modal__secondary-button:not(:only-child) {
          margin-right: ds-spacing($ds-s-100);
        }
      }
    }
  }

  &.ds-modal--sheet {
    .ds-modal__inner {
      margin-bottom: 0;
      height: 100%;
      max-width: 100%;
      width: 100%;
      background-color: transparent;
    }

    .ds-modal__content {
      box-sizing: border-box;
      position: absolute;
      bottom: 0;
      padding: ds-spacing($ds-s-100);
      width: 100%;
      border-radius: ds-border-radius(100) ds-border-radius(100) 0 0;
    }
  }
}