app/components/yattho/alpha/dialog.css.map in yattho_view_components-0.0.1 vs app/components/yattho/alpha/dialog.css.map in yattho_view_components-0.1.1
- old
+ new
@@ -1 +1 @@
-{"version":3,"sources":["dialog.pcss"],"names":[],"mappings":"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","file":"dialog.css","sourcesContent":["/* Overlay */\n\n.Overlay--hidden {\n display: none !important;\n}\n\n.Overlay--visibilityHidden {\n height: 0;\n overflow: hidden;\n visibility: hidden;\n opacity: 0;\n}\n\n.Overlay {\n display: flex;\n width: min(var(--overlay-width), 100vw - 2rem);\n min-width: 192px;\n max-height: min(calc(100vh - 2rem), var(--overlay-height));\n white-space: normal;\n flex-direction: column;\n background-color: var(--color-canvas-overlay);\n border-radius: var(--yattho-borderRadius-large, 12px);\n box-shadow: var(--color-overlay-shadow);\n opacity: 1;\n\n &.Overlay--size-auto {\n min-width: 192px;\n max-width: calc(100vw - 2rem);\n max-height: calc(100vh - 2rem);\n }\n\n &.Overlay--size-full {\n width: 100vw;\n height: 100vh;\n }\n\n &.Overlay--size-xsmall {\n --overlay-width: 192px;\n\n max-height: calc(100vh - 2rem);\n }\n\n &.Overlay--size-small {\n --overlay-height: 256px;\n --overlay-width: 320px;\n }\n\n &.Overlay--size-small-portrait {\n --overlay-height: 432px;\n --overlay-width: 320px;\n }\n\n &.Overlay--size-medium {\n --overlay-height: 320px;\n --overlay-width: 480px;\n }\n\n &.Overlay--size-medium-portrait {\n --overlay-height: 600px;\n --overlay-width: 480px;\n }\n\n &.Overlay--size-large {\n --overlay-height: 432px;\n --overlay-width: 640px;\n }\n\n &.Overlay--size-xlarge {\n --overlay-height: 600px;\n --overlay-width: 960px;\n }\n\n &.Overlay--height-auto {\n height: auto;\n }\n\n /* start deprecate in favor of Alpha::Dialog */\n &.Overlay--height-xsmall {\n height: min(192px, 100vh - 2rem);\n }\n\n &.Overlay--height-small {\n height: min(256px, 100vh - 2rem);\n }\n\n &.Overlay--height-medium {\n height: min(320px, 100vh - 2rem);\n }\n\n &.Overlay--height-large {\n height: min(432px, 100vh - 2rem);\n }\n\n &.Overlay--height-xlarge {\n height: min(600px, 100vh - 2rem);\n }\n\n &.Overlay--width-auto {\n width: auto;\n }\n\n &.Overlay--width-small {\n width: min(256px, 100vw - 2rem);\n }\n\n &.Overlay--width-medium {\n width: min(320px, 100vw - 2rem);\n }\n\n &.Overlay--width-large {\n width: min(480px, 100vw - 2rem);\n }\n\n &.Overlay--width-xlarge {\n width: min(640px, 100vw - 2rem);\n }\n\n &.Overlay--width-xxlarge {\n width: min(960px, 100vw - 2rem);\n }\n\n /* end deprecate */\n\n &.Overlay--motion-scaleFade {\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-scaleFade;\n }\n }\n}\n\n@keyframes Overlay--motion-scaleFade {\n 0% {\n opacity: 0;\n transform: scale(0.5);\n }\n\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n/* for <form> element that wraps entire contents of overlay */\n.Overlay-form {\n display: flex;\n overflow: auto;\n flex-direction: column;\n flex-grow: 1;\n}\n\n.Overlay-header {\n z-index: 1;\n display: flex;\n flex-direction: column;\n\n &.Overlay-header--divided {\n padding-bottom: var(--yattho-stack-padding-condensed, 8px);\n box-shadow: inset 0 calc(var(--yattho-borderWidth-thin, 1px) * -1) var(--color-border-default);\n\n & + .Overlay-body {\n padding-top: var(--yattho-stack-padding-normal, 16px);\n }\n }\n\n &.Overlay-header--large {\n & .Overlay-headerContentWrap {\n & .Overlay-titleWrap {\n gap: var(--yattho-stack-gap-condensed, 8px);\n\n & .Overlay-title {\n font-size: var(--yattho-text-title-size-medium, 20px);\n }\n\n & .Overlay-description {\n font-size: var(--yattho-text-body-size-medium, 14px);\n }\n }\n }\n }\n\n & .Overlay-headerContentWrap {\n display: flex;\n align-items: flex-start;\n gap: var(--yattho-stack-gap-condensed, 8px);\n padding: var(--yattho-stack-gap-condensed, 8px) var(--yattho-stack-gap-condensed, 8px) 0 var(--yattho-stack-gap-condensed, 8px);\n\n & .Overlay-actionWrap {\n display: flex;\n flex-direction: row;\n gap: var(--yattho-stack-gap-condensed, 8px);\n }\n\n & .Overlay-titleWrap {\n display: flex;\n 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);\n flex-direction: column;\n flex-grow: 1;\n gap: var(--yattho-control-small-gap, 4px);\n\n & .Overlay-title {\n margin: 0;\n font-size: var(--yattho-text-body-size-medium, 14px);\n font-weight: var(--base-text-weight-semibold, 600);\n }\n\n & .Overlay-description {\n margin: 0;\n font-size: var(--yattho-text-body-size-small, 12px);\n font-weight: var(--base-text-weight-normal, 400);\n color: var(--color-fg-muted);\n }\n }\n }\n}\n\n/* generic body content slot */\n.Overlay-body {\n padding: var(--yattho-stack-padding-normal, 16px);\n padding-top: 0;\n overflow-y: auto;\n scrollbar-width: thin;\n font-size: var(--yattho-text-body-size-medium, 14px);\n flex-grow: 1;\n\n &.Overlay-body--paddingCondensed {\n padding: var(--yattho-stack-padding-condensed, 8px);\n padding-top: 0;\n }\n\n &.Overlay-body--paddingNone {\n padding: 0;\n }\n}\n\n/* generic footer slot */\n.Overlay-footer {\n z-index: 1;\n display: flex;\n padding: 0 var(--yattho-stack-padding-normal, 16px) var(--yattho-stack-padding-normal, 16px) var(--yattho-stack-padding-normal, 16px);\n flex-direction: row;\n flex-shrink: 0;\n flex-wrap: wrap;\n\n &.Overlay-footer--divided {\n padding-top: var(--yattho-stack-padding-normal, 16px);\n box-shadow: inset 0 var(--yattho-borderWidth-thin, 1px) var(--color-border-default);\n }\n\n &.Overlay-footer--alignStart {\n justify-content: flex-start;\n gap: var(--yattho-stack-gap-condensed, 8px);\n }\n\n &.Overlay-footer--alignCenter {\n justify-content: center;\n gap: var(--yattho-stack-gap-condensed, 8px);\n }\n\n &.Overlay-footer--alignEnd {\n justify-content: flex-end;\n gap: var(--yattho-stack-gap-condensed, 8px);\n }\n}\n\n/* TODO: replace with refactored IconButton */\n.Overlay-closeButton {\n position: relative;\n display: grid;\n width: var(--base-size-32, 32px);\n height: var(--base-size-32, 32px);\n padding: 0;\n color: var(--color-fg-muted);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--yattho-borderWidth-thin, 1px) solid transparent;\n border-radius: var(--yattho-borderRadius-medium, 6px);\n transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n transition-property: color, background-color, border-color;\n place-content: center;\n align-self: flex-start;\n flex-shrink: 0;\n\n &:hover,\n &:focus {\n background-color: var(--color-btn-hover-bg);\n border: var(--yattho-borderWidth-thin, 1px) solid var(--color-btn-hover-bg);\n }\n\n /* Override .close-button's `border: 0` that triggers a border-color transition on hover */\n &.close-button {\n border: var(--yattho-borderWidth-thin, 1px) solid transparent;\n }\n}\n\n@define-mixin Overlay-backdrop {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 999;\n display: flex;\n background-color: var(--color-neutral-muted);\n}\n\n@define-mixin Overlay-backdrop--transparent {\n position: absolute;\n z-index: 999;\n background-color: transparent;\n}\n\n/* variants must be mixins so we can extend within a media query (@extend is not supported inside media queries) */\n\n/* border-radius repeats within placement options to ensure the original radius is reset when two classes co-exist */\n\n/* center */\n@define-mixin Overlay-backdrop--center {\n @mixin Overlay-backdrop;\n\n align-items: center;\n justify-content: center;\n}\n\n/* anchor */\n@define-mixin Overlay-backdrop--anchor {\n @mixin Overlay-backdrop--transparent;\n\n & .Overlay {\n width: auto;\n }\n}\n\n/* anchor side(s) */\n@define-mixin Overlay-backdrop--side $responsiveVariant {\n @mixin Overlay-backdrop;\n\n /* default left */\n align-items: center;\n justify-content: left;\n\n &.Overlay-backdrop--placement-left$(responsiveVariant) {\n align-items: center;\n justify-content: left;\n\n & > .Overlay$(responsiveVariant) {\n height: 100vh;\n max-height: unset;\n border-radius: var(--yattho-borderRadius-large, 12px);\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInRight;\n }\n }\n }\n\n &.Overlay-backdrop--placement-right$(responsiveVariant) {\n align-items: center;\n justify-content: right;\n\n & > .Overlay$(responsiveVariant) {\n height: 100vh;\n max-height: unset;\n border-radius: var(--yattho-borderRadius-large, 12px);\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInLeft;\n }\n }\n }\n\n &.Overlay-backdrop--placement-bottom$(responsiveVariant) {\n align-items: end;\n justify-content: center;\n\n & > .Overlay$(responsiveVariant) {\n width: 100vw;\n height: auto;\n max-height: calc(100vh - 2rem);\n border-radius: var(--yattho-borderRadius-large, 12px);\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideUp;\n }\n }\n }\n\n &.Overlay-backdrop--placement-top$(responsiveVariant) {\n align-items: start;\n justify-content: center;\n\n & > .Overlay$(responsiveVariant) {\n border-radius: var(--yattho-borderRadius-large, 12px);\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideDown;\n }\n }\n }\n}\n\n/* full width */\n@define-mixin Overlay-backdrop--full {\n @mixin Overlay-backdrop;\n\n & .Overlay {\n width: 100%;\n max-width: 100vw;\n height: 100%;\n max-height: 100vh;\n border-radius: unset !important;\n flex-grow: 1;\n }\n}\n\n/* Overlay variant classnames */\n.Overlay-backdrop--center {\n @mixin Overlay-backdrop--center;\n}\n\n.Overlay-backdrop--anchor {\n @mixin Overlay-backdrop--anchor;\n}\n\n.Overlay-backdrop--side {\n @mixin Overlay-backdrop--side;\n}\n\n.Overlay-backdrop--full {\n @mixin Overlay-backdrop--full;\n}\n\n/* responsive variants */\n\n/* --yattho-viewportRange-narrowLandscape */\n@media (max-width: 767px) {\n .Overlay-backdrop--center-whenNarrow {\n @mixin Overlay-backdrop--center;\n }\n\n .Overlay-backdrop--anchor-whenNarrow {\n @mixin Overlay-backdrop--anchor;\n }\n\n .Overlay-backdrop--side-whenNarrow {\n @mixin Overlay-backdrop--side -whenNarrow;\n }\n\n .Overlay-backdrop--full-whenNarrow {\n @mixin Overlay-backdrop--full;\n }\n}\n\n@keyframes Overlay--motion-slideDown {\n from {\n transform: translateY(-100%);\n }\n}\n\n@keyframes Overlay--motion-slideUp {\n from {\n transform: translateY(100%);\n }\n}\n\n@keyframes Overlay--motion-slideInRight {\n from {\n transform: translateX(-100%);\n }\n}\n\n@keyframes Overlay--motion-slideInLeft {\n from {\n transform: translateX(100%);\n }\n}"]}
+{"version":3,"sources":["dialog.pcss"],"names":[],"mappings":"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","file":"dialog.css","sourcesContent":["/* Overlay */\n\n.Overlay--hidden {\n display: none !important;\n}\n\n.Overlay--visibilityHidden {\n height: 0;\n overflow: hidden;\n visibility: hidden;\n opacity: 0;\n}\n\n.Overlay {\n display: flex;\n width: min(var(--overlay-width), 100vw - 2rem);\n min-width: 192px;\n max-height: min(calc(100vh - 2rem), var(--overlay-height));\n white-space: normal;\n flex-direction: column;\n background-color: var(--color-canvas-overlay);\n border-radius: var(--yattho-borderRadius-large, 12px);\n box-shadow: var(--color-overlay-shadow);\n opacity: 1;\n\n &.Overlay--size-auto {\n min-width: 192px;\n max-width: calc(100vw - 2rem);\n max-height: calc(100vh - 2rem);\n }\n\n &.Overlay--size-full {\n width: 100vw;\n height: 100vh;\n }\n\n &.Overlay--size-xsmall {\n --overlay-width: 192px;\n\n max-height: calc(100vh - 2rem);\n }\n\n &.Overlay--size-small {\n --overlay-height: 256px;\n --overlay-width: 320px;\n }\n\n &.Overlay--size-small-portrait {\n --overlay-height: 432px;\n --overlay-width: 320px;\n }\n\n &.Overlay--size-medium {\n --overlay-height: 320px;\n --overlay-width: 480px;\n }\n\n &.Overlay--size-medium-portrait {\n --overlay-height: 600px;\n --overlay-width: 480px;\n }\n\n &.Overlay--size-large {\n --overlay-height: 432px;\n --overlay-width: 640px;\n }\n\n &.Overlay--size-xlarge {\n --overlay-height: 600px;\n --overlay-width: 960px;\n }\n\n &.Overlay--height-auto {\n height: auto;\n }\n\n /* start deprecate in favor of Alpha::Dialog */\n &.Overlay--height-xsmall {\n height: min(192px, 100vh - 2rem);\n }\n\n &.Overlay--height-small {\n height: min(256px, 100vh - 2rem);\n }\n\n &.Overlay--height-medium {\n height: min(320px, 100vh - 2rem);\n }\n\n &.Overlay--height-large {\n height: min(432px, 100vh - 2rem);\n }\n\n &.Overlay--height-xlarge {\n height: min(600px, 100vh - 2rem);\n }\n\n &.Overlay--width-auto {\n width: auto;\n }\n\n &.Overlay--width-small {\n width: min(256px, 100vw - 2rem);\n }\n\n &.Overlay--width-medium {\n width: min(320px, 100vw - 2rem);\n }\n\n &.Overlay--width-large {\n width: min(480px, 100vw - 2rem);\n }\n\n &.Overlay--width-xlarge {\n width: min(640px, 100vw - 2rem);\n }\n\n &.Overlay--width-xxlarge {\n width: min(960px, 100vw - 2rem);\n }\n\n /* end deprecate */\n\n &.Overlay--motion-scaleFade {\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-scaleFade;\n }\n }\n}\n\n@keyframes Overlay--motion-scaleFade {\n 0% {\n opacity: 0;\n transform: scale(0.5);\n }\n\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n/* for <form> element that wraps entire contents of overlay */\n.Overlay-form {\n display: flex;\n overflow: auto;\n flex-direction: column;\n flex-grow: 1;\n}\n\n.Overlay-header {\n z-index: 1;\n display: flex;\n flex-direction: column;\n\n &.Overlay-header--divided {\n padding-bottom: var(--yattho-stack-padding-condensed, 8px);\n box-shadow: inset 0 calc(var(--yattho-borderWidth-thin, 1px) * -1) var(--color-border-default);\n\n & + .Overlay-body {\n padding-top: var(--yattho-stack-padding-normal, 16px);\n }\n }\n\n &.Overlay-header--large {\n & .Overlay-headerContentWrap {\n & .Overlay-titleWrap {\n gap: var(--yattho-stack-gap-condensed, 8px);\n\n & .Overlay-title {\n font-size: var(--yattho-text-title-size-medium, 20px);\n }\n\n & .Overlay-description {\n font-size: var(--yattho-text-body-size-medium, 14px);\n }\n }\n }\n }\n\n & .Overlay-headerContentWrap {\n display: flex;\n align-items: flex-start;\n gap: var(--yattho-stack-gap-condensed, 8px);\n padding: var(--yattho-stack-gap-condensed, 8px) var(--yattho-stack-gap-condensed, 8px) 0 var(--yattho-stack-gap-condensed, 8px);\n\n & .Overlay-actionWrap {\n display: flex;\n flex-direction: row;\n gap: var(--yattho-stack-gap-condensed, 8px);\n }\n\n & .Overlay-titleWrap {\n display: flex;\n 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);\n flex-direction: column;\n flex-grow: 1;\n gap: var(--yattho-control-small-gap, 4px);\n\n & .Overlay-title {\n margin: 0;\n font-size: var(--yattho-text-body-size-medium, 14px);\n font-weight: var(--base-text-weight-semibold, 600);\n }\n\n & .Overlay-description {\n margin: 0;\n font-size: var(--yattho-text-body-size-small, 12px);\n font-weight: var(--base-text-weight-normal, 400);\n color: var(--color-fg-muted);\n }\n }\n }\n}\n\n/* generic body content slot */\n.Overlay-body {\n padding: var(--yattho-stack-padding-normal, 16px);\n padding-top: 0;\n overflow-y: auto;\n scrollbar-width: thin;\n font-size: var(--yattho-text-body-size-medium, 14px);\n flex-grow: 1;\n\n &.Overlay-body--paddingCondensed {\n padding: var(--yattho-stack-padding-condensed, 8px);\n padding-top: 0;\n }\n\n &.Overlay-body--paddingNone {\n padding: 0;\n }\n}\n\n/* generic footer slot */\n.Overlay-footer {\n z-index: 1;\n display: flex;\n padding: 0 var(--yattho-stack-padding-normal, 16px) var(--yattho-stack-padding-normal, 16px) var(--yattho-stack-padding-normal, 16px);\n flex-direction: row;\n flex-shrink: 0;\n flex-wrap: wrap;\n\n &.Overlay-footer--divided {\n padding-top: var(--yattho-stack-padding-normal, 16px);\n box-shadow: inset 0 var(--yattho-borderWidth-thin, 1px) var(--color-border-default);\n }\n\n &.Overlay-footer--alignStart {\n justify-content: flex-start;\n gap: var(--yattho-stack-gap-condensed, 8px);\n }\n\n &.Overlay-footer--alignCenter {\n justify-content: center;\n gap: var(--yattho-stack-gap-condensed, 8px);\n }\n\n &.Overlay-footer--alignEnd {\n justify-content: flex-end;\n gap: var(--yattho-stack-gap-condensed, 8px);\n }\n}\n\n/* TODO: replace with refactored IconButton */\n.Overlay-closeButton {\n position: relative;\n display: grid;\n width: var(--base-size-32, 32px);\n height: var(--base-size-32, 32px);\n padding: 0;\n color: var(--color-fg-muted);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--yattho-borderWidth-thin, 1px) solid transparent;\n border-radius: var(--yattho-borderRadius-medium, 6px);\n transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n transition-property: color, background-color, border-color;\n place-content: center;\n align-self: flex-start;\n flex-shrink: 0;\n\n &:hover,\n &:focus {\n background-color: var(--color-btn-hover-bg);\n border: var(--yattho-borderWidth-thin, 1px) solid var(--color-btn-hover-bg);\n }\n\n /* Override .close-button's `border: 0` that triggers a border-color transition on hover */\n &.close-button {\n border: var(--yattho-borderWidth-thin, 1px) solid transparent;\n }\n}\n\n@define-mixin Overlay-backdrop {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 999;\n display: flex;\n background-color: var(--color-neutral-muted);\n}\n\n@define-mixin Overlay-backdrop--transparent {\n position: absolute;\n z-index: 999;\n background-color: transparent;\n}\n\n/* variants must be mixins so we can extend within a media query (@extend is not supported inside media queries) */\n\n/* border-radius repeats within placement options to ensure the original radius is reset when two classes co-exist */\n\n/* center */\n@define-mixin Overlay-backdrop--center {\n @mixin Overlay-backdrop;\n\n align-items: center;\n justify-content: center;\n}\n\n/* anchor */\n@define-mixin Overlay-backdrop--anchor {\n @mixin Overlay-backdrop--transparent;\n\n & .Overlay {\n width: auto;\n }\n}\n\n/* anchor side(s) */\n@define-mixin Overlay-backdrop--side $responsiveVariant {\n @mixin Overlay-backdrop;\n\n /* default left */\n align-items: center;\n justify-content: left;\n\n &.Overlay-backdrop--placement-left$(responsiveVariant) {\n align-items: center;\n justify-content: left;\n\n & > .Overlay$(responsiveVariant) {\n height: 100vh;\n max-height: unset;\n border-radius: var(--yattho-borderRadius-large, 12px);\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInRight;\n }\n }\n }\n\n &.Overlay-backdrop--placement-right$(responsiveVariant) {\n align-items: center;\n justify-content: right;\n\n & > .Overlay$(responsiveVariant) {\n height: 100vh;\n max-height: unset;\n border-radius: var(--yattho-borderRadius-large, 12px);\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInLeft;\n }\n }\n }\n\n &.Overlay-backdrop--placement-bottom$(responsiveVariant) {\n align-items: end;\n justify-content: center;\n\n & > .Overlay$(responsiveVariant) {\n width: 100vw;\n height: auto;\n max-height: calc(100vh - 2rem);\n border-radius: var(--yattho-borderRadius-large, 12px);\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideUp;\n }\n }\n }\n\n &.Overlay-backdrop--placement-top$(responsiveVariant) {\n align-items: start;\n justify-content: center;\n\n & > .Overlay$(responsiveVariant) {\n border-radius: var(--yattho-borderRadius-large, 12px);\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideDown;\n }\n }\n }\n}\n\n/* full width */\n@define-mixin Overlay-backdrop--full {\n @mixin Overlay-backdrop;\n\n & .Overlay {\n width: 100%;\n max-width: 100vw;\n height: 100%;\n max-height: 100vh;\n border-radius: unset !important;\n flex-grow: 1;\n }\n}\n\n/* Overlay variant classnames */\n.Overlay-backdrop--center {\n @mixin Overlay-backdrop--center;\n}\n\n.Overlay-backdrop--anchor {\n @mixin Overlay-backdrop--anchor;\n}\n\n.Overlay-backdrop--side {\n @mixin Overlay-backdrop--side;\n}\n\n.Overlay-backdrop--full {\n @mixin Overlay-backdrop--full;\n}\n\n/* responsive variants */\n\n/* --yattho-viewportRange-narrowLandscape */\n@media (max-width: 767px) {\n .Overlay-backdrop--center-whenNarrow {\n @mixin Overlay-backdrop--center;\n }\n\n .Overlay-backdrop--anchor-whenNarrow {\n @mixin Overlay-backdrop--anchor;\n }\n\n .Overlay-backdrop--side-whenNarrow {\n @mixin Overlay-backdrop--side -whenNarrow;\n }\n\n .Overlay-backdrop--full-whenNarrow {\n @mixin Overlay-backdrop--full;\n }\n}\n\n@keyframes Overlay--motion-slideDown {\n from {\n transform: translateY(-100%);\n }\n}\n\n@keyframes Overlay--motion-slideUp {\n from {\n transform: translateY(100%);\n }\n}\n\n@keyframes Overlay--motion-slideInRight {\n from {\n transform: translateX(-100%);\n }\n}\n\n@keyframes Overlay--motion-slideInLeft {\n from {\n transform: translateX(100%);\n }\n}"]}
\ No newline at end of file