/* 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(--yattho-borderRadius-large, 12px);
  box-shadow: var(--color-overlay-shadow);
  opacity: 1;
}

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

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

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

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

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

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

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

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

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

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

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

/* start deprecate in favor of Alpha::Dialog */

.Overlay.Overlay--height-xsmall {
    height: min(192px, 100vh - 2rem);
  }

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

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

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

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

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

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

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

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

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

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

/* end deprecate */

@media screen and (prefers-reduced-motion: no-preference) {

.Overlay.Overlay--motion-scaleFade {
      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.Overlay-header--divided {
    padding-bottom: var(--yattho-stack-padding-condensed, 8px);
    box-shadow: inset 0 calc(var(--yattho-borderWidth-thin, 1px) * -1) var(--color-border-default);
  }

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

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

.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title {
          font-size: var(--yattho-text-title-size-medium, 20px);
        }

.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description {
          font-size: var(--yattho-text-body-size-medium, 14px);
        }

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

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

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

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

.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description {
        margin: 0;
        font-size: var(--yattho-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(--yattho-stack-padding-normal, 16px);
  padding-top: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  font-size: var(--yattho-text-body-size-medium, 14px);
  flex-grow: 1;
}

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

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

/* generic footer slot */

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

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

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

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

.Overlay-footer.Overlay-footer--alignEnd {
    justify-content: flex-end;
    gap: var(--yattho-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;
  -webkit-user-select: none;
          user-select: none;
  background-color: transparent;
  border: var(--yattho-borderWidth-thin, 1px) solid transparent;
  border-radius: var(--yattho-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;
}

.Overlay-closeButton:hover,
  .Overlay-closeButton:focus {
    background-color: var(--color-btn-hover-bg);
    border: var(--yattho-borderWidth-thin, 1px) solid var(--color-btn-hover-bg);
  }

/* Override .close-button's `border: 0` that triggers a border-color transition on hover  */

.Overlay-closeButton.close-button {
    border: var(--yattho-borderWidth-thin, 1px) 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 */

/* center */

/* anchor */

/* anchor side(s) */

/* full width */

/* Overlay variant classnames */

.Overlay-backdrop--center {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  display: flex;
  background-color: var(--color-neutral-muted);
  align-items: center;
  justify-content: center;
}

.Overlay-backdrop--anchor {
  position: absolute;
  z-index: 999;
  background-color: transparent;
}

.Overlay-backdrop--anchor .Overlay {
    width: auto;
  }

.Overlay-backdrop--side {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  display: flex;
  background-color: var(--color-neutral-muted);
  /* default left */
  align-items: center;
  justify-content: left;
}

.Overlay-backdrop--side.Overlay-backdrop--placement-left {
    align-items: center;
    justify-content: left;
  }

.Overlay-backdrop--side.Overlay-backdrop--placement-left > .Overlay {
      height: 100vh;
      max-height: unset;
      border-radius: var(--yattho-borderRadius-large, 12px);
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

@media screen and (prefers-reduced-motion: no-preference) {

.Overlay-backdrop--side.Overlay-backdrop--placement-left > .Overlay {
        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInRight;
    }
      }

.Overlay-backdrop--side.Overlay-backdrop--placement-right {
    align-items: center;
    justify-content: right;
  }

.Overlay-backdrop--side.Overlay-backdrop--placement-right > .Overlay {
      height: 100vh;
      max-height: unset;
      border-radius: var(--yattho-borderRadius-large, 12px);
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

@media screen and (prefers-reduced-motion: no-preference) {

.Overlay-backdrop--side.Overlay-backdrop--placement-right > .Overlay {
        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInLeft;
    }
      }

.Overlay-backdrop--side.Overlay-backdrop--placement-bottom {
    align-items: end;
    justify-content: center;
  }

.Overlay-backdrop--side.Overlay-backdrop--placement-bottom > .Overlay {
      width: 100vw;
      height: auto;
      max-height: calc(100vh - 2rem);
      border-radius: var(--yattho-borderRadius-large, 12px);
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }

@media screen and (prefers-reduced-motion: no-preference) {

.Overlay-backdrop--side.Overlay-backdrop--placement-bottom > .Overlay {
        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideUp;
    }
      }

.Overlay-backdrop--side.Overlay-backdrop--placement-top {
    align-items: start;
    justify-content: center;
  }

.Overlay-backdrop--side.Overlay-backdrop--placement-top > .Overlay {
      border-radius: var(--yattho-borderRadius-large, 12px);
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }

@media screen and (prefers-reduced-motion: no-preference) {

.Overlay-backdrop--side.Overlay-backdrop--placement-top > .Overlay {
        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideDown;
    }
      }

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

.Overlay-backdrop--full .Overlay {
    border-radius: unset !important;
  }

.Overlay-backdrop--full .Overlay {
    width: 100%;
    max-width: 100vw;
    height: 100%;
    max-height: 100vh;
    flex-grow: 1;
  }

/* responsive variants */

/* --yattho-viewportRange-narrowLandscape */

@media (max-width: 767px) {
  .Overlay-backdrop--center-whenNarrow {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    display: flex;
    background-color: var(--color-neutral-muted);
    align-items: center;
    justify-content: center;
  }

  .Overlay-backdrop--anchor-whenNarrow {
    position: absolute;
    z-index: 999;
    background-color: transparent;
  }
    .Overlay-backdrop--anchor-whenNarrow .Overlay {
    width: auto;
  }

  .Overlay-backdrop--side-whenNarrow {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    display: flex;
    background-color: var(--color-neutral-muted);
    /* default left */
    align-items: center;
    justify-content: left;
  }
    .Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow {
    align-items: center;
    justify-content: left;
  }

    .Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow > .Overlay-whenNarrow {
      height: 100vh;
      max-height: unset;
      border-radius: var(--yattho-borderRadius-large, 12px);
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

      @media screen and (prefers-reduced-motion: no-preference) {

    .Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow > .Overlay-whenNarrow {
        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInRight;
    }
      }
    .Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow {
    align-items: center;
    justify-content: right;
  }

    .Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow > .Overlay-whenNarrow {
      height: 100vh;
      max-height: unset;
      border-radius: var(--yattho-borderRadius-large, 12px);
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

      @media screen and (prefers-reduced-motion: no-preference) {

    .Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow > .Overlay-whenNarrow {
        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInLeft;
    }
      }
    .Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow {
    align-items: end;
    justify-content: center;
  }

    .Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow > .Overlay-whenNarrow {
      width: 100vw;
      height: auto;
      max-height: calc(100vh - 2rem);
      border-radius: var(--yattho-borderRadius-large, 12px);
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }

      @media screen and (prefers-reduced-motion: no-preference) {

    .Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow > .Overlay-whenNarrow {
        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideUp;
    }
      }
    .Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow {
    align-items: start;
    justify-content: center;
  }

    .Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow > .Overlay-whenNarrow {
      border-radius: var(--yattho-borderRadius-large, 12px);
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }

      @media screen and (prefers-reduced-motion: no-preference) {

    .Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow > .Overlay-whenNarrow {
        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideDown;
    }
      }

  .Overlay-backdrop--full-whenNarrow {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    display: flex;
    background-color: var(--color-neutral-muted);
  }
    .Overlay-backdrop--full-whenNarrow .Overlay {
    border-radius: unset !important;
  }
    .Overlay-backdrop--full-whenNarrow .Overlay {
    width: 100%;
    max-width: 100vw;
    height: 100%;
    max-height: 100vh;
    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%);
  }
}