@ebay/skin/dist/snackbar-dialog/snackbar-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;
}
.snackbar-dialog {
    background-color: var(
        --snackbar-dialog-background-color,
        var(--color-background-inverse)
    );
    border-radius: var(
        --snackbar-dialog-border-radius,
        var(--border-radius-100)
    );
    bottom: 40px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);
    color: var(
        --snackbar-dialog-foreground-color,
        var(--color-foreground-on-inverse)
    );
    left: var(--spacing-100);
    margin: auto;
    max-height: 40vh;
    max-width: 448px;
    position: fixed;
    right: var(--spacing-100);
    transform: translateY(0);
    will-change: opacity, transform;
    z-index: 2;
}
.snackbar-dialog--transition {
    transition:
        opacity 0.2s cubic-bezier(0.21, 0.31, 1, 1.22) 0s,
        transform 0.2s cubic-bezier(0.21, 0.31, 1, 1.22) 0s;
}
.snackbar-dialog--hide-init,
.snackbar-dialog--show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}
.snackbar-dialog--hide,
.snackbar-dialog--show-init {
    display: block;
    opacity: 0;
    transform: translateY(110%);
}
.snackbar-dialog__window {
    display: flex;
    margin: var(--spacing-200) var(--spacing-300);
}
.snackbar-dialog__window--column {
    flex-direction: column;
}
.snackbar-dialog__main {
    margin-inline-end: var(--spacing-400);
}
.snackbar-dialog__main p {
    margin: 0;
}
.snackbar-dialog__actions {
    margin-inline-start: auto;
}
.snackbar-dialog__window--column .snackbar-dialog__actions {
    margin-top: var(--spacing-200);
}
.snackbar-dialog__actions .fake-link {
    color: var(
        --snackbar-dialog-foreground-color,
        var(--color-foreground-on-inverse)
    );
    text-decoration: none;
}
.snackbar-dialog__actions .fake-link:first-letter {
    text-decoration: underline;
}
.snackbar-dialog__actions button.fake-link:hover:not(:disabled) {
    color: var(
        --snackbar-dialog-foreground-color,
        var(--color-foreground-on-inverse)
    );
    text-decoration: underline;
}
@media (min-width: 512px) {
    .snackbar-dialog {
        bottom: 20px;
    }
}
[dir="rtl"] .snackbar-dialog {
    left: auto;
    right: 0;
}