/* Overlay */

/* TODO: One day this can be :has(:modal), when it is better supported */
body.has-modal {
  overflow: hidden !important;
  padding-right: var(--dialog-scrollgutter) !important;
}

dialog.Overlay:not([open]) {
  display: none;
}

.Overlay--hidden {
  display: none !important;
}

.Overlay--visibilityHidden {
  height: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
}

/* This is for @oddbird/popover-polyfill;
 * A FOUC occurs in browsers which do not support :popover-open.
 * We can try to hide the popover if :popover-open is not supported.
 */
@supports not selector(:popover-open) {
  [popover]:not(.\:popover-open) {
    display: none;
  }
}

.Overlay {
  display: flex;
  inset: 0;
  position: static;
  margin: auto;
  padding: 0;
  width: min(var(--overlay-width), 100vw - 2rem);
  min-width: 192px;
  max-height: min(calc(100vh - 2rem), var(--overlay-height));
  white-space: normal;
  flex-direction: column;
  background-color: var(--overlay-bgColor);
  color: var(--fgColor-default);
  border: 0;
  border-radius: var(--borderRadius-large);
  box-shadow: var(--shadow-floating-small);
  opacity: 1;

  &.Overlay--size-auto {
    min-width: 192px;
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
  }

  &.Overlay--size-full {
    width: 100vw;
    height: 100vh;
  }

  &.Overlay--size-xsmall {
    --overlay-width: 192px;

    max-height: calc(100vh - 2rem);
  }

  &.Overlay--size-small {
    --overlay-height: 256px;
    --overlay-width: 320px;
  }

  &.Overlay--size-small-portrait {
    --overlay-height: 432px;
    --overlay-width: 320px;
  }

  &.Overlay--size-medium {
    --overlay-height: 320px;
    --overlay-width: 480px;
  }

  &.Overlay--size-medium-portrait {
    --overlay-height: 600px;
    --overlay-width: 480px;
  }

  &.Overlay--size-large {
    --overlay-height: 432px;
    --overlay-width: 640px;
  }

  &.Overlay--size-xlarge {
    --overlay-height: 600px;
    --overlay-width: 960px;
  }

  &.Overlay--height-auto {
    height: auto;
  }

  &.Overlay--placement-left, &.Overlay--placement-right {
    height: 100%;
    max-height: unset;
    position: fixed;
  }

  &.Overlay--motion-scaleFade, &.Overlay--placement-left, &.Overlay--placement-right {
    @media screen and (prefers-reduced-motion: no-preference) {
      animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-scaleFade;
    }
  }

  &.Overlay--placement-left {
    inset: 0 auto 0 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    animation-name: Overlay--motion-slideInRight;
  }

  &.Overlay--placement-right {
    inset: 0 0 0 auto;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    animation-name: Overlay--motion-slideInLeft;
  }

  /* start deprecate in favor of Alpha::Dialog */
  &.Overlay--height-xsmall {
    height: min(192px, 100vh - 2rem);
  }

  &.Overlay--height-small {
    height: min(256px, 100vh - 2rem);
  }

  &.Overlay--height-medium {
    height: min(320px, 100vh - 2rem);
  }

  &.Overlay--height-large {
    height: min(432px, 100vh - 2rem);
  }

  &.Overlay--height-xlarge {
    height: min(600px, 100vh - 2rem);
  }

  &.Overlay--width-auto {
    width: auto;
  }

  &.Overlay--width-small {
    width: min(256px, 100vw - 2rem);
  }

  &.Overlay--width-medium {
    width: min(320px, 100vw - 2rem);
  }

  &.Overlay--width-large {
    width: min(480px, 100vw - 2rem);
  }

  &.Overlay--width-xlarge {
    width: min(640px, 100vw - 2rem);
  }

  &.Overlay--width-xxlarge {
    width: min(960px, 100vw - 2rem);
  }

  /* end deprecate */
}

.Overlay:modal {
  position: fixed;
}

@keyframes Overlay--motion-scaleFade {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* for <form> element that wraps entire contents of overlay */
.Overlay-form {
  display: flex;
  overflow: auto;
  flex-direction: column;
  flex-grow: 1;
}

.Overlay-header {
  z-index: 1;
  display: flex;
  flex-direction: column;
  color: var(--fgColor-default);

  &.Overlay-header--divided {
    padding-bottom: var(--stack-padding-condensed);
    box-shadow: inset 0 calc(var(--borderWidth-thin) * -1) var(--borderColor-default);

    & + .Overlay-body {
      padding-top: var(--stack-padding-normal);
    }
  }

  &.Overlay-header--large {
    & .Overlay-headerContentWrap {
      & .Overlay-titleWrap {
        gap: var(--stack-gap-condensed);

        & .Overlay-title {
          font-size: var(--text-title-size-medium);
        }

        & .Overlay-description {
          font-size: var(--text-body-size-medium);
        }
      }
    }
  }

  & .Overlay-headerContentWrap {
    display: flex;
    align-items: flex-start;
    gap: var(--stack-gap-condensed);
    padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);

    & .Overlay-actionWrap {
      display: flex;
      flex-direction: row;
      gap: var(--stack-gap-condensed);
    }

    & .Overlay-titleWrap {
      display: flex;
      padding: calc(var(--stack-gap-condensed) * 0.75) 0 calc(var(--stack-gap-condensed) * 0.75)
        var(--stack-gap-condensed);
      flex-direction: column;
      flex-grow: 1;
      gap: var(--control-small-gap);

      & .Overlay-title {
        margin: 0;
        font-size: var(--text-body-size-medium);
        font-weight: var(--base-text-weight-semibold);
      }

      & .Overlay-description {
        margin: 0;
        font-size: var(--text-body-size-small);
        font-weight: var(--base-text-weight-normal);
        color: var(--fgColor-muted);
      }
    }
  }
}

.Overlay-headerFilter {
  padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);
}

/* generic body content slot */
.Overlay-body {
  padding: var(--stack-padding-normal);
  padding-top: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  font-size: var(--text-body-size-medium);
  flex-grow: 1;

  &.Overlay-body--paddingCondensed {
    padding: var(--stack-padding-condensed);
    padding-top: 0;
  }

  &.Overlay-body--paddingNone {
    padding: 0;
  }
}

/* generic footer slot */
.Overlay-footer {
  z-index: 1;
  display: flex;
  padding: 0 var(--stack-padding-normal) var(--stack-padding-normal) var(--stack-padding-normal);
  flex-direction: row;
  flex-shrink: 0;
  flex-wrap: wrap;

  &.Overlay-footer--divided {
    padding-top: var(--stack-padding-normal);
    box-shadow: inset 0 var(--borderWidth-thin) var(--borderColor-default);
  }

  &.Overlay-footer--alignStart {
    justify-content: flex-start;
    gap: var(--stack-gap-condensed);
  }

  &.Overlay-footer--alignCenter {
    justify-content: center;
    gap: var(--stack-gap-condensed);
  }

  &.Overlay-footer--alignEnd {
    justify-content: flex-end;
    gap: var(--stack-gap-condensed);
  }
}

/* TODO: replace with refactored IconButton */
.Overlay-closeButton {
  position: relative;
  display: grid;
  width: var(--base-size-32);
  height: var(--base-size-32);
  padding: 0;
  color: var(--fgColor-muted);
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  border: var(--borderWidth-thin) solid transparent;
  border-radius: var(--borderRadius-medium);
  transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
  transition-property: color, background-color, border-color;
  place-content: center;
  align-self: flex-start;
  flex-shrink: 0;

  &:hover,
  &:focus {
    background-color: var(--button-default-bgColor-hover);
    border: var(--borderWidth-thin) solid var(--control-bgColor-hover);
  }

  /* Override .close-button's `border: 0` that triggers a border-color transition on hover  */
  &.close-button {
    border: var(--borderWidth-thin) solid transparent;
  }
}

/* variants must be mixins so we can extend within a media query (@extend is not supported inside media queries) */

/* border-radius repeats within placement options to ensure the original radius is reset when two classes co-exist */

/* full width */
.Overlay--full {
  width: 100%;
  max-width: 100vw;
  height: 100%;
  max-height: 100vh;
  border-radius: unset !important;
  flex-grow: 1;
}

/* responsive variants */

/* --viewportRange-narrowLandscape */
@media (max-width: 767px) {
  .Overlay.Overlay--placement-left-whenNarrow, .Overlay--placement-right-whenNarrow {
    height: 100%;
    max-height: 100vh;
    position: fixed;
  }

  .Overlay.Overlay--placement-left-whenNarrow {
    inset: 0 auto 0 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    animation-name: Overlay--motion-slideInLeft;
  }

  .Overlay.Overlay--placement-right-whenNarrow {
    inset: 0 0 0 auto;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    animation-name: Overlay--motion-slideInLeft;
  }

  .Overlay.Overlay--placement-bottom-whenNarrow {
    width: 100%;
    max-width: 100vw;
    inset: auto 0 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    animation-name: Overlay--motion-slideUp;
  }

  .Overlay--full-whenNarrow {
    width: 100%;
    max-width: 100vw;
    height: 100%;
    max-height: 100vh;
    border-radius: unset !important;
    flex-grow: 1;
  }
}

@keyframes Overlay--motion-slideDown {
  from {
    transform: translateY(-100%);
  }
}

@keyframes Overlay--motion-slideUp {
  from {
    transform: translateY(100%);
  }
}

@keyframes Overlay--motion-slideInRight {
  from {
    transform: translateX(-100%);
  }
}

@keyframes Overlay--motion-slideInLeft {
  from {
    transform: translateX(100%);
  }
}