@layer core.atoms{@property --body-overlay-opacity{syntax: "<number>"; inherits: true; initial-value: .5;}@property --body-gradient-opacity{syntax: "<number>"; inherits: true; initial-value: .5;}.phxsg-overlay{--body-overlay-color: 0, 0, 0;--body-overlay-opacity: .5;--body-overlay-background: rgb(var(--body-overlay-color), var(--body-overlay-opacity));--body-overlay-height: 100%;--body-gradient-orientation: 180deg;--body-gradient-color: 255, 255, 255;--body-gradient-opacity: .9;--body-gradient-background: linear-gradient( var(--body-gradient-orientation), rgb(var(--body-gradient-color), var(--body-gradient-opacity)) 0%, rgb(255 255 255 0%) var(--body-gradient-length) );--body-gradient-length: 80%;@media screen and (min-width: 768px){--body-gradient-length: 50%}height:var(--body-overlay-height);width:100%;position:absolute;top:0;left:0;z-index:0;background-color:var(--body-overlay-background);transition:--body-overlay-opacity var(--duration-standard) var(--ease-in-out),--body-gradient-opacity var(--duration-standard) var(--ease-in-out);pointer-events:none}.phxsg-overlay--gradient{background:var(--body-gradient-background)}.phxsg-overlay--negative{--body-gradient-color: 0, 0, 0;--body-gradient-opacity: .75}.phxsg-overlay--bottom{top:auto;bottom:0}}