/* Overlay */

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

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

.Overlay {
  display: flex;
  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(--color-canvas-overlay);
  border-radius: var(--borderRadius-large, 12px);
  box-shadow: var(--color-overlay-shadow);
  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;
  }

  /* 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--motion-scaleFade {
    @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;
    }
  }
}

@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;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  &.Overlay-footer--divided {
    padding-top: var(--stack-padding-normal, 16px);
    box-shadow: inset 0 var(--borderWidth-thin, 1px) var(--color-border-default);
  }

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

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

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

/* TODO: replace with refactored IconButton */
.Overlay-closeButton {
  position: relative;
  display: grid;
  width: var(--base-size-32, 32px);
  height: var(--base-size-32, 32px);
  padding: 0;
  color: var(--color-fg-muted);
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  border: var(--borderWidth-thin, 1px) solid transparent;
  border-radius: var(--borderRadius-medium, 6px);
  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(--color-btn-hover-bg);
    border: var(--borderWidth-thin, 1px) solid var(--color-btn-hover-bg);
  }

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

@define-mixin Overlay-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  display: flex;
  background-color: var(--color-neutral-muted);
}

@define-mixin Overlay-backdrop--transparent {
  position: absolute;
  z-index: 999;
  background-color: 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 */

/* center */
@define-mixin Overlay-backdrop--center {
  @mixin Overlay-backdrop;

  align-items: center;
  justify-content: center;
}

/* anchor */
@define-mixin Overlay-backdrop--anchor {
  @mixin Overlay-backdrop--transparent;
}

/* anchor side(s) */
@define-mixin Overlay-backdrop--side $responsiveVariant {
  @mixin Overlay-backdrop;

  /* default left */
  align-items: center;
  justify-content: left;

  &.Overlay-backdrop--placement-left$(responsiveVariant) {
    align-items: center;
    justify-content: left;

    & > .Overlay$(responsiveVariant) {
      height: 100vh;
      max-height: unset;
      border-radius: var(--borderRadius-large, 12px);
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;

      @media screen and (prefers-reduced-motion: no-preference) {
        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInRight;
      }
    }
  }

  &.Overlay-backdrop--placement-right$(responsiveVariant) {
    align-items: center;
    justify-content: right;

    & > .Overlay$(responsiveVariant) {
      height: 100vh;
      max-height: unset;
      border-radius: var(--borderRadius-large, 12px);
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;

      @media screen and (prefers-reduced-motion: no-preference) {
        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInLeft;
      }
    }
  }

  &.Overlay-backdrop--placement-bottom$(responsiveVariant) {
    align-items: end;
    justify-content: center;

    & > .Overlay$(responsiveVariant) {
      width: 100vw;
      height: auto;
      max-height: calc(100vh - 2rem);
      border-radius: var(--borderRadius-large, 12px);
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;

      @media screen and (prefers-reduced-motion: no-preference) {
        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideUp;
      }
    }
  }

  &.Overlay-backdrop--placement-top$(responsiveVariant) {
    align-items: start;
    justify-content: center;

    & > .Overlay$(responsiveVariant) {
      border-radius: var(--borderRadius-large, 12px);
      border-top-left-radius: 0;
      border-top-right-radius: 0;

      @media screen and (prefers-reduced-motion: no-preference) {
        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideDown;
      }
    }
  }
}

/* full width */
@define-mixin Overlay-backdrop--full {
  @mixin Overlay-backdrop;

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

/* Overlay variant classnames */
.Overlay-backdrop--center {
  @mixin Overlay-backdrop--center;
}

.Overlay-backdrop--anchor {
  @mixin Overlay-backdrop--anchor;
}

.Overlay-backdrop--side {
  @mixin Overlay-backdrop--side;
}

.Overlay-backdrop--full {
  @mixin Overlay-backdrop--full;
}

/* responsive variants */

/* --viewportRange-narrowLandscape */
@media (max-width: 767px) {
  .Overlay-backdrop--center-whenNarrow {
    @mixin Overlay-backdrop--center;
  }

  .Overlay-backdrop--anchor-whenNarrow {
    @mixin Overlay-backdrop--anchor;
  }

  .Overlay-backdrop--side-whenNarrow {
    @mixin Overlay-backdrop--side -whenNarrow;
  }

  .Overlay-backdrop--full-whenNarrow {
    @mixin Overlay-backdrop--full;
  }
}

@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%);
  }
}