@use '../variables/breakpoint';
@import '@angular/cdk/overlay-prebuilt.css';

.cdk-overlay-container {
  z-index: 1051;
}

.cdk-global-overlay-wrapper {
  &:has(> .k-modal-panel) {
    overflow-y: auto;
    pointer-events: auto;
    align-items: flex-start;

    @media #{breakpoint.$grid-breakpoint-sm} {
      flex-flow: wrap-reverse;
      pointer-events: none;
      overflow-y: initial;
    }
  }

  > .k-modal-panel {
    margin: var(--space-32) 0 var(--space-5);
    max-height: initial;

    @media screen and (height <= 760px) {
      margin: var(--space-20) 0 var(--space-5);
    }

    @media #{breakpoint.$grid-breakpoint-sm} {
      margin: var(--space-14) 0 0;
      max-height: 100%;
    }
  }
}