/*
 * Modal component
 */
@use 'sass:map';
@use '../abstracts/variables';
@use '../abstracts/mixins/breakpoints' as *;
@use '../abstracts/' as *;

$pkt-modal-gap: map.get(variables.$spacing, 'size-32');
$pkt-modal-padding-sides: map.get(variables.$spacing, 'size-40');

.pkt-modal {
  border: none;
  padding: 0;
  background-color: transparent;
  opacity: 0;
  display: none;
  transition:
    translate 0.2s ease-in-out,
    opacity 0.2s ease-in-out,
    overlay 0.2s ease-in-out allow-discrete,
    display 0.2s ease-in-out allow-discrete;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: fixed;

  &:focus {
    outline: none;
  }

  &[open] {
    display: block;
    opacity: 1;
    @starting-style {
      opacity: 0;
    }
  }
  &__wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  &__dialog {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    translate: 0 10%;
    &[open] {
      translate: 0 0;
      @starting-style {
        translate: 0 -10%;
      }
    }
    .pkt-modal__wrapper {
      max-height: 90vh;
      max-height: 90svh;
    }
    @supports not (selector(::backdrop)) {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  &__drawer {
    top: 0;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    overflow-y: auto;
    .pkt-modal__wrapper {
      min-height: 100vh;
      min-height: 100dvh;
    }
    &[open] {
      translate: 0 0;
    }
    &--right {
      left: auto;
      right: 0;
      margin-right: 0;
      translate: 100% 0;
      @starting-style {
        &[open] {
          translate: 100% 0;
        }
      }
    }
    &--left {
      left: 0;
      right: auto;
      margin-left: 0;
      translate: -100% 0;
      @starting-style {
        &[open] {
          translate: -100% 0;
        }
      }
    }
  }

  &::backdrop {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.55);
    transition:
      opacity 0.2s ease-out,
      overlay 0.2s ease-out allow-discrete,
      display 0.2s allow-discrete;
  }

  &[open]::backdrop {
    opacity: 1;
    @starting-style {
      opacity: 0;
    }
  }

  @supports not (selector(::backdrop)) {
    position: fixed;
    & + .backdrop {
      background-color: rgba(0, 0, 0, 0.55);
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
    }
  }

  .pkt-modal__container {
    padding-top: $pkt-modal-gap;
    background: var(--pkt-color-background-default);
    overflow-y: auto;
  }

  .pkt-modal__header {
    display: grid;
    grid-template-columns: 1fr 4rem;
    grid-template-rows: 4rem 1fr;
    grid-template-areas:
      'header close'
      'header empty';
    justify-content: flex-start;
    width: 100%;
  }

  .pkt-modal__header-background {
    background: var(--pkt-color-background-default);
    grid-area: empty;
  }

  .pkt-modal__headingText {
    background: var(--pkt-color-background-default);
    grid-area: header;
    padding: $pkt-modal-gap 0 0 $pkt-modal-padding-sides;
    margin: 0;
    color: var(--pkt-color-text-body-default);
  }

  .pkt-modal__closeButton {
    grid-area: close;

    display: flex;
    flex-direction: row-reverse;
    align-self: flex-start;
  }

  .pkt-modal__noCloseButton {
    background: var(--pkt-color-background-default);
    grid-area: close;
  }
  .pkt-modal__closeButton--blue {
    height: 100%;
    background: var(--pkt-color-background-default);
    .pkt-btn {
      margin: map.get(variables.$spacing, 'size-4');
    }
  }

  .pkt-modal__closeButton--yellow-filled {
    .pkt-btn {
      height: 4rem;
      width: 4rem;
      justify-content: center;
      align-items: center;
      border: none;
      border-radius: 50%;
      color: var(--pkt-color-surface-strong-dark-blue);
      background-color: var(--pkt-color-brand-yellow-1000);
      border: 4px solid var(--pkt-color-brand-yellow-1000);
      outline: 0;

      &:hover,
      &:focus {
        background-color: var(--pkt-color-brand-warm-blue-1000);
        border-color: var(--pkt-color-brand-warm-blue-1000);
        color: var(--pkt-color-background-default);
        .pkt-icon {
          color: var(--pkt-color-background-default);
        }
      }
      &:focus-visible {
        outline: 0;
        border-color: var(--pkt-color-border-states-focus);
      }
      .pkt-btn__icon {
        width: 2rem;
        height: 2rem;
      }
    }
  }

  .pkt-modal__content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: map.get(variables.$spacing, 'size-16');
    overflow-y: auto;
    padding: map.get(variables.$spacing, 'size-32') map.get(variables.$spacing, 'size-40');
    padding-top: 0;
    position: relative;
    color: var(--pkt-color-text-body-default);
    background:
      linear-gradient(var(--pkt-color-white) 30%, transparent) top,
      linear-gradient(transparent, var(--pkt-color-border-subtle) 60%) bottom,
      radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.3), transparent) top,
      radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.3), transparent) bottom;
    background-attachment: local, local, scroll, scroll;
    background-repeat: no-repeat;
    background-size:
      100% 40px,
      100% 50px,
      100% 16px,
      100% 16px;
  }
}

// Prevent scroll when modal is open
body.pkt-modal--open {
  overflow: hidden;
  scrollbar-gutter: stable;
}

//  SIZES
.pkt-modal--small {
  width: 480px;
}

.pkt-modal--medium {
  width: map.get(variables.$breakpoints, 'phablet');
}

.pkt-modal--large {
  width: 640px;
}

.pkt-modal__btn-wrapper {
  padding-top: map.get(variables.$spacing, 'size-24');
  display: flex;
  justify-content: flex-start;
  gap: map.get(variables.$spacing, 'size-16');
  flex-wrap: wrap;
  width: 100%;
}

// Small screen

@media screen and (max-width: 640px) {
  .pkt-modal {
    &[open] {
      line-height: map.get(variables.$line-height, 'lh-24');

      .pkt-modal__headingText {
        font-size: map.get(variables.$font-size, 'size-22');
      }

      .pkt-modal__content {
        letter-spacing: map.get(variables.$letter-spacing, 'tight');
        font-size: map.get(variables.$font-size, 'size-16');
      }
    }

    &--large {
      width: 100vw;
    }
  }
}

@media screen and (max-width: 480px) {
  .pkt-modal {
    &--small {
      width: 100vw;
    }
  }
}

@media screen and (max-width: map.get(variables.$breakpoints, 'phablet')) {
  .pkt-modal {
    &--medium {
      width: 100vw;
    }
  }
}

// Make sure the buttons are centered and stacked on mobile
@media screen and (max-width: 480px) {
  .pkt-modal__btn {
    &-wrapper {
      display: grid;
      grid-template-columns: 1fr;
      justify-content: center;
      align-items: center;

      .pkt-btn {
        justify-content: center;
      }
    }
  }
}

.pkt-modal--noShadow {
  box-shadow: none;
}

.pkt-modal--transparentBackdrop {
  &::backdrop,
  &[open]::backdrop {
    background-color: transparent;
  }
  @supports not (selector(::backdrop)) {
    & + .backdrop {
      background-color: transparent;
    }
  }
}

// Adjustments for padding

.pkt-modal.pkt-modal--removePadding {
  .pkt-modal__headingText,
  .pkt-modal__content,
  .pkt-modal__container {
    padding: 0;
  }
}

.pkt-modal.pkt-modal--noHeadingText {
  .pkt-modal__container {
    padding-top: 1rem;
  }
}

// In Modal docs, margin is being added on buttons because of some global style, thus we need to override it here so that our docs example is consistent with the component.
.pkt-modal
  .pkt-modal__container
  .pkt-modal__btn-wrapper
  button.pkt-btn:not(.pkt-inputwrapper__helptext-expandable > .pkt-btn):not(.pkt-header__user-btn):not(
    .pkt-searchinput__button
  ) {
  margin: 0;
}

// Polyfill specific styles
._dialog_overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}