@ebay/skin/dist/toast-dialog/toast-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;
    --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);
    --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);
}
@keyframes toast-dialog-open {
    0% {
        opacity: 0;
        transform: translateY(110%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes toast-dialog-close {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(110%);
    }
}
.toast-dialog {
    background-color: var(--color-background-accent);
    border-top-left-radius: var(--border-radius-100);
    border-top-right-radius: var(--border-radius-100);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);
    color: var(--color-foreground-on-success);
    inset: auto 0 0;
    max-height: 40vh;
    min-width: 320px;
    position: fixed;
    transform: translateY(0);
    width: 100vw;
    will-change: opacity, transform;
    z-index: 2;
}
dialog.toast-dialog {
    border: none;
    margin: 0;
    outline-offset: 2px;
    padding: 0;
}
.toast-dialog[open] {
    animation: toast-dialog-open 0.2s cubic-bezier(0.21, 0.31, 1, 1.22);
}
.toast-dialog[open].toast-dialog--close {
    animation: toast-dialog-close 0.2s cubic-bezier(0.21, 0.31, 1, 1.22);
}
.toast-dialog a {
    color: var(--color-foreground-on-success);
}
.toast-dialog a:focus {
    outline: 1px auto currentColor;
}
.toast-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;
}
.toast-dialog--hide-init,
.toast-dialog--show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}
.toast-dialog--hide,
.toast-dialog--show-init {
    display: block;
    opacity: 0;
    transform: translateY(110%);
}
.toast-dialog__window {
    padding: var(--spacing-100) var(--spacing-200) var(--spacing-200);
}
.toast-dialog__header {
    align-items: center;
    display: flex;
}
.toast-dialog__header h2,
.toast-dialog__title {
    margin: 0;
}
button.icon-btn.toast-dialog__close {
    align-self: flex-start;
    border: 0;
    color: var(--color-foreground-on-success);
    flex-shrink: 0;
    margin-inline-start: auto;
    overflow: hidden;
    padding: 0;
    position: relative;
}
button.icon-btn.toast-dialog__close:after {
    background-color: var(--color-state-layer-neutral);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}
button.icon-btn.toast-dialog__close:not(
        [disabled],
        [aria-disabled="true"]
    ):hover:after,
button.icon-btn.toast-dialog__close[href]:hover:after {
    background-color: var(--color-state-layer-hover);
}
button.icon-btn.toast-dialog__close:not(
        [disabled],
        [aria-disabled="true"]
    ):focus-visible:after,
button.icon-btn.toast-dialog__close[href]:focus-visible:after {
    background-color: var(--color-state-layer-focus);
}
button.icon-btn.toast-dialog__close:not(
        [disabled],
        [aria-disabled="true"]
    ):active:after,
button.icon-btn.toast-dialog__close[href]:active:after {
    background-color: var(--color-state-layer-pressed);
}
button.icon-btn.toast-dialog__close:focus {
    outline: 2px solid var(--color-foreground-on-success);
}
button.icon-btn.toast-dialog__close > svg {
    fill: currentColor;
}
.toast-dialog__footer {
    display: flex;
    justify-content: flex-end;
}
.toast-dialog__footer button:first-letter {
    text-decoration: underline;
}
.toast-dialog__footer button.btn--primary,
.toast-dialog__footer button.btn--secondary {
    overflow: hidden;
    position: relative;
}
.toast-dialog__footer button.btn--primary:after,
.toast-dialog__footer button.btn--secondary:after {
    background-color: var(--color-state-layer-neutral);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}
.toast-dialog__footer
    button.btn--primary:not([disabled], [aria-disabled="true"]):hover:after,
.toast-dialog__footer button.btn--primary[href]:hover:after,
.toast-dialog__footer
    button.btn--secondary:not([disabled], [aria-disabled="true"]):hover:after,
.toast-dialog__footer button.btn--secondary[href]:hover:after {
    background-color: var(--color-state-layer-hover);
}
.toast-dialog__footer
    button.btn--primary:not(
        [disabled],
        [aria-disabled="true"]
    ):focus-visible:after,
.toast-dialog__footer button.btn--primary[href]:focus-visible:after,
.toast-dialog__footer
    button.btn--secondary:not(
        [disabled],
        [aria-disabled="true"]
    ):focus-visible:after,
.toast-dialog__footer button.btn--secondary[href]:focus-visible:after {
    background-color: var(--color-state-layer-focus);
}
.toast-dialog__footer
    button.btn--primary:not([disabled], [aria-disabled="true"]):active:after,
.toast-dialog__footer button.btn--primary[href]:active:after,
.toast-dialog__footer
    button.btn--secondary:not([disabled], [aria-disabled="true"]):active:after,
.toast-dialog__footer button.btn--secondary[href]:active:after {
    background-color: var(--color-state-layer-pressed);
}
.toast-dialog__footer button.btn--primary,
.toast-dialog__footer button.btn--secondary {
    border-color: var(--color-foreground-on-accent);
    border-style: solid;
    border-width: 1px;
    outline-offset: 2px;
}
.toast-dialog__footer button.btn--primary {
    background-color: var(--color-background-primary);
    color: var(--color-foreground-accent);
}
.toast-dialog__footer button.btn--secondary {
    background-color: initial;
    color: var(--color-background-primary);
    font-weight: 700;
    margin-inline-end: var(--spacing-100);
}
.toast-dialog__footer button.btn--primary:focus,
.toast-dialog__footer button.btn--secondary:focus {
    outline: 2px solid var(--color-foreground-on-success);
}
@media (min-width: 512px) {
    .toast-dialog {
        border-radius: var(--border-radius-100);
        bottom: var(--spacing-200);
        left: var(--spacing-200);
        max-width: 480px;
        width: auto;
    }
    .toast-dialog__window {
        padding: var(--spacing-200) var(--spacing-300) var(--spacing-300);
    }
}