.flyout{--flyout-width: 23.4375rem;--flyout-background: #ffffff;--flyout-header: #ffffff;--flyout-transition-duration: .35s;position:fixed;z-index:var(--z-flyout);top:0;top:var(--header-height, 0);display:flex;flex-direction:column;width:100%;max-width:min(var(--flyout-width),100vw - var(--scrollbar-width) - 1.5rem);height:calc(100% - var(--header-height, 0));background-color:var(--flyout-background);color:#000;transform:translate(0)}.flyout--left{left:0}.flyout--right{right:0}.flyout__header{display:flex;justify-content:space-between;align-items:center}.flyout__body{flex:1;overflow-y:auto;padding:.5rem clamp(.75rem,.75rem + (100vw - 320px) / 160 * 12,1.5rem);scrollbar-width:thin}@media(min-width:60em){.flyout__body{padding-inline:2rem}}.flyout__header,.flyout__footer{padding:1.5rem}@media(min-width:60em){.flyout__header,.flyout__footer{padding:1.5rem 2rem}}.flyout__header,.flyout__body,.flyout__footer{background-color:inherit}.flyout__footer{border-top:1px solid #e4e6ec}.flyout__title{margin:0}.flyout-left-enter-active,.flyout-left-leave-active,.flyout-right-enter-active,.flyout-right-leave-active{transition:transform var(--flyout-transition-duration, .5s) ease-out var(--flyout-transition-delay, 0s),opacity var(--flyout-transition-duration, .5s) ease-out var(--flyout-transition-delay, 0s)}.flyout-left-enter-to,.flyout-left-leave,.flyout-right-enter-to,.flyout-right-leave{opacity:1;transform:translate(0)}.flyout-left-enter,.flyout-left-leave-to{opacity:0;transform:translate(var(--translate-x, -100%))}.flyout-right-enter,.flyout-right-leave-to{opacity:0;transform:translate(var(--translate-x, 100%))}