@ebay/skin/dist/dialog/dialog.css

Skin - CSS modules that represent the brand eBay

:root {
    --dialog-scrim-color-hide: rgb(17 24 32 / 0);
    --dialog-scrim-color-show: rgb(17 24 32 / 0.7);
    --dialog-lightbox-max-width: 616px;
    --dialog-max-width: 616px;
    --dialog-wide-max-width: 896px;
    --dialog-narrow-max-width: 480px;
    --dialog-scrim-color: rgb(17 24 32 / 0.7);
    scrollbar-gutter: stable;
}
@keyframes dialog-open-scrim {
    0% {
        background: transparent;
    }
    to {
        background-color: var(--dialog-scrim-color);
    }
}
@keyframes dialog-close-scrim {
    0% {
        background-color: var(--dialog-scrim-color);
    }
    to {
        background: transparent;
    }
}
@keyframes dialog-open-scale {
    0% {
        scale: 0.75;
    }
    to {
        scale: 1;
    }
}
@keyframes dialog-close-scale {
    0% {
        scale: 1;
    }
    to {
        scale: 0.75;
    }
}
@keyframes dialog-open-opacity {
    0% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes dialog-close-opacity {
    0% {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
body:has(.dialog[open]) {
    overflow: hidden !important;
}
.dialog {
    background-color: var(--color-background-primary);
    border: none;
    border-radius: var(--border-radius-150);
    color: var(--color-foreground-primary);
    flex-direction: column;
    max-height: 90%;
    max-width: 88%;
    min-height: 55px;
    min-width: 208px;
    padding: 0;
}
.dialog__header {
    display: flex;
    flex-shrink: 0;
    padding: var(--spacing-200) var(--spacing-200) 0;
    position: relative;
}
.dialog__header h1,
.dialog__header h2,
.dialog__header h3,
.dialog__header h4,
.dialog__header h5,
.dialog__header h6 {
    align-self: center;
    flex: 1 1 auto;
    margin: 0;
    overflow-wrap: anywhere;
}
.dialog__header > :last-child:not(:only-child) {
    flex-shrink: 0;
    margin-inline-start: var(--spacing-200);
}
.dialog__main {
    box-sizing: border-box;
    flex: 1 1 auto;
    overflow: auto;
    padding: var(--spacing-200);
    position: relative;
}
.dialog__main > :first-child {
    margin-top: 0;
}
.dialog__main > :last-child {
    margin-bottom: 0;
}
.dialog__footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-200);
    position: relative;
}
.dialog__footer > :not(:first-child) {
    margin-top: var(--spacing-200);
}
.dialog__image {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: var(--border-radius-100) var(--border-radius-100) 0 0;
    height: 218px;
    position: absolute;
    width: 100%;
}
.dialog--expressive .dialog__header > * {
    margin-top: 218px;
}
button.icon-btn.dialog__close,
button.icon-btn.dialog__prev {
    align-self: flex-start;
    border: 0;
    flex-shrink: 0;
    height: 32px;
    min-width: 32px;
    position: relative;
    width: 32px;
    z-index: 1;
}
button.icon-btn.dialog__prev {
    margin-inline-end: var(--spacing-200);
}
.dialog--expressive button.icon-btn.dialog__close,
.dialog--expressive button.icon-btn.dialog__prev {
    margin: 0;
}
.dialog--expressive button.icon-btn.dialog__prev + * {
    margin-inline-start: -32px;
}
.dialog--expressive .dialog__header {
    padding: var(--spacing-300) var(--spacing-300) 0;
}
.dialog--expressive .dialog__footer,
.dialog--expressive .dialog__main {
    padding: var(--spacing-200) var(--spacing-300);
}
.dialog[open] {
    display: flex;
}
.dialog[open].dialog--close::backdrop {
    animation: dialog-close-scrim var(--motion-duration-short-3)
        var(--motion-easing-continuous) forwards;
}
.dialog[open]::backdrop {
    animation: dialog-open-scrim var(--motion-duration-short-3)
        var(--motion-easing-continuous) forwards;
}
.dialog[open].dialog--close {
    animation:
        dialog-close-scale var(--motion-duration-medium-3)
            var(--motion-easing-soft-exit),
        dialog-close-opacity var(--motion-duration-short-3)
            var(--motion-easing-continuous);
    transition:
        display var(--motion-duration-short-3) allow-discrete,
        overlay var(--motion-duration-short-3) allow-discrete;
}
.dialog[open] {
    animation:
        dialog-open-scale var(--motion-duration-medium-3)
            var(--motion-easing-standard),
        dialog-open-opacity var(--motion-duration-short-3)
            var(--motion-easing-continuous);
}
.dialog--large {
    height: 98%;
    max-height: 98%;
    width: 95%;
}
@media (min-width: 512px) {
    .dialog {
        border-radius: var(--border-radius-100);
    }
    .dialog--wide {
        max-width: 88%;
    }
    .dialog--wide .dialog__image {
        height: 256px;
    }
    .dialog--wide.dialog--expressive .dialog__header > * {
        margin-top: 256px;
    }
    .dialog__footer {
        flex-direction: row;
        justify-content: flex-end;
    }
    .dialog__footer > :not(:first-child) {
        margin-left: var(--spacing-100);
        margin-top: 0;
    }
    .dialog--large {
        align-self: center;
        height: 70%;
        max-height: 95%;
    }
}
@media (min-width: 768px) {
    .dialog {
        max-width: var(--dialog-max-width);
    }
    .dialog--narrow {
        max-width: var(--dialog-narrow-max-width);
    }
    .dialog--wide {
        max-width: var(--dialog-wide-max-width);
        max-width: 88%;
    }
}
@media (min-width: 1024px) {
    .dialog--wide {
        max-width: var(--dialog-wide-max-width);
    }
}
[dir="rtl"] button.icon-btn.dialog__prev .icon--16 {
    transform: rotate(180deg);
}