@use "../../styles/tokens" as t;
@use "../../styles/mixins" as m;
@use "../../styles/motion" as motion;

@include motion.fade;
@include motion.fade-out;
@include motion.pop;
@include motion.pop-out;

@include m.scoped {
  // Same overlay as ModalShell — the reference uses one backdrop treatment.
  .overlay {
    position: fixed;
    inset: 0;
    z-index: t.$z-overlay;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: t.$space-16;
    background: rgba(16, 24, 40, 0.5);
    animation: svFade 0.15s ease-out;
  }

  .panel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-height: 100%;
    animation: svPop 0.2s t.$ease;
  }

  // The component holds `closing` for 160ms before unmounting; the exit
  // animations have to finish inside that window.
  .closing {
    animation: svFadeOut 0.16s ease-in forwards;
  }

  .panel.closing {
    animation: svPopOut 0.16s ease-in forwards;
  }

  @media (max-width: 735px) {
    .overlay {
      padding: t.$space-6;
    }
  }
}