@wikimedia/codex/dist/modules/CdxPopover-bidi.css

Codex Design System for Wikimedia

[dir] .cdx-popover-floating-enter-active,[dir] .cdx-popover-floating-leave-active{transition-property:none;transition-duration:0s}.cdx-popover__backdrop--bottom-sheet{display:flex;flex-direction:column;justify-content:flex-end;position:fixed;top:0;bottom:0;z-index:400;min-height:100%;width:100vw;height:100vh;height:-webkit-fill-available;height:100dvh}[dir] .cdx-popover__backdrop--bottom-sheet{background-color:var(--background-color-backdrop-light, rgba(255, 255, 255, .65))}[dir=ltr] .cdx-popover__backdrop--bottom-sheet{left:0}[dir=rtl] .cdx-popover__backdrop--bottom-sheet{right:0}[dir] .cdx-popover__backdrop--no-backdrop{background-color:var(--background-color-transparent, transparent)}.cdx-popover{display:flex;flex-direction:column;position:absolute;z-index:700;box-sizing:border-box;min-width:12rem}[dir] .cdx-popover{background-color:var(--background-color-base, #fff);border:1px solid var(--border-color-base, #a2a9b1);border-radius:2px;padding:16px;box-shadow:0 4px 4px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, .06)),0 0 8px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, .06))}.cdx-popover__header{display:flex;align-items:flex-start;flex-shrink:0;gap:8px}[dir] .cdx-popover__header{margin-bottom:8px}.cdx-popover__header__icon{flex-shrink:0;height:var(--line-height-small, 1.375rem)}.cdx-popover__header__title{font-size:var(--font-size-medium, 1rem);font-weight:700;line-height:var(--line-height-small, 1.375rem)}.cdx-popover__header__button-wrapper{display:flex;flex-direction:column;justify-content:center;height:var(--line-height-small, 1.375rem)}[dir=ltr] .cdx-popover__header__button-wrapper{margin-right:-8px;margin-left:auto}[dir=rtl] .cdx-popover__header__button-wrapper{margin-left:-8px;margin-right:auto}.cdx-popover__body{flex-grow:1;flex-shrink:1;overflow-y:auto;font-size:var(--font-size-medium, 1rem);line-height:var(--line-height-small, 1.375rem)}.cdx-popover__footer{flex-shrink:0}[dir] .cdx-popover__footer{margin-top:16px}.cdx-popover__footer__actions{display:flex;flex-direction:row-reverse;gap:12px}@supports (-webkit-touch-callout: none) and (not (translate: none)){[dir=ltr] .cdx-popover__footer__actions .cdx-button:not(:last-child){margin-right:12px}[dir=rtl] .cdx-popover__footer__actions .cdx-button:not(:last-child){margin-left:12px}}.cdx-popover__footer__actions--vertical{flex-direction:column;width:100%}.cdx-popover__footer__actions--vertical .cdx-button{max-width:none}@supports (-webkit-touch-callout: none) and (not (translate: none)){[dir] .cdx-popover__footer__actions--vertical .cdx-button:not(:last-child){margin-bottom:12px}[dir=ltr] .cdx-popover__footer__actions--vertical .cdx-button:not(:last-child){margin-right:0}[dir=rtl] .cdx-popover__footer__actions--vertical .cdx-button:not(:last-child){margin-left:0}}@media (max-width: 640px){.cdx-popover__footer__actions{flex-direction:column;width:100%}.cdx-popover__footer__actions .cdx-button{max-width:none}@supports (-webkit-touch-callout: none) and (not (translate: none)){[dir] .cdx-popover__footer__actions .cdx-button:not(:last-child){margin-bottom:12px}[dir=ltr] .cdx-popover__footer__actions .cdx-button:not(:last-child){margin-right:0}[dir=rtl] .cdx-popover__footer__actions .cdx-button:not(:last-child){margin-left:0}}}.cdx-popover__arrow{position:absolute;width:1rem;height:1rem;-webkit-clip-path:polygon(0 0,100% 0,0 100%);clip-path:polygon(0 0,100% 0,0 100%)}[dir] .cdx-popover__arrow{background-color:var(--background-color-base, #fff);border:1px solid var(--border-color-base, #a2a9b1);box-shadow:0 4px 4px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, .06)),0 0 8px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, .06))}[dir=ltr] .cdx-popover__arrow{border-top-left-radius:2px}[dir=rtl] .cdx-popover__arrow{border-top-right-radius:2px}.cdx-popover--bottom-sheet{position:static;max-height:calc(100% - 8rem);max-height:90dvh}[dir] .cdx-popover--bottom-sheet{border-top:1px solid var(--border-color-base, #a2a9b1);border-right:0;border-bottom:0;border-left:0;border-radius:0;padding:0;padding-top:env(safe-area-inset-top,0);box-shadow:0 4px 8px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, .06)),0 0 16px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, .06))}[dir] .cdx-popover--bottom-sheet .cdx-popover__header{margin-bottom:0;padding:16px 24px}.cdx-popover--bottom-sheet .cdx-popover__header .cdx-popover__header__title{flex-grow:1}.cdx-popover--bottom-sheet .cdx-popover__body{min-height:0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}[dir] .cdx-popover--bottom-sheet .cdx-popover__body{padding:8px 24px}[dir] .cdx-popover--bottom-sheet .cdx-popover__body--no-footer{padding-bottom:24px}[dir] .cdx-popover--bottom-sheet .cdx-popover__body>*:first-child{margin-top:0;padding-top:0}[dir] .cdx-popover--bottom-sheet .cdx-popover__body>*:last-child{margin-bottom:0;padding-bottom:0}[dir] .cdx-popover--bottom-sheet .cdx-popover__footer{margin-top:auto;padding:16px 24px;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}[dir] .cdx-popover--dividers .cdx-popover__header{border-bottom:1px solid var(--border-color-subtle, #c8ccd1)}[dir] .cdx-popover--dividers .cdx-popover__footer{border-top:1px solid var(--border-color-subtle, #c8ccd1)}[dir] .cdx-popover-bottom-sheet-enter-active,[dir] .cdx-popover-bottom-sheet-leave-active{transition-duration:.25s;transition-timing-function:ease}[dir] .cdx-popover-bottom-sheet-enter-active{transition-property:opacity}[dir] .cdx-popover-bottom-sheet-enter-active .cdx-popover--bottom-sheet{transition-property:transform;transition-duration:.25s;transition-timing-function:ease}[dir] .cdx-popover-bottom-sheet-leave-active{transition-property:opacity}[dir] .cdx-popover-bottom-sheet-leave-active .cdx-popover--bottom-sheet{transition-property:transform;transition-duration:.25s;transition-timing-function:ease}.cdx-popover-bottom-sheet-enter-from{opacity:0}[dir] .cdx-popover-bottom-sheet-enter-from .cdx-popover--bottom-sheet{transform:translateY(100%)}.cdx-popover-bottom-sheet-leave-to{opacity:0}[dir] .cdx-popover-bottom-sheet-leave-to .cdx-popover--bottom-sheet{transform:translateY(100%)}.cdx-popover-focus-trap{position:absolute}.cdx-popover-focus-trap:focus{outline:0}