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

Skin - CSS modules that represent the brand eBay

:root {
    --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
    --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
    --dialog-lightbox-max-width: 616px;
}
.toast-dialog {
    background-color: var(
        --toast-dialog-background-color,
        var(--color-background-information)
    );
    border-top-left-radius: var(
        --toast-dialog-border-radius,
        var(--border-radius-100)
    );
    border-top-right-radius: var(
        --toast-dialog-border-radius,
        var(--border-radius-100)
    );
    bottom: 0;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);
    left: 0;
    max-height: 40vh;
    min-width: 320px;
    position: fixed;
    transform: translateY(0);
    width: 100vw;
    will-change: opacity, transform;
    z-index: 2;
}

.toast-dialog,
.toast-dialog a {
    color: var(
        --toast-dialog-foreground-color,
        var(--color-foreground-on-information)
    );
}

.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 {
    margin: 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.toast-dialog__close {
    align-self: flex-start;
    border: 0;
    color: var(
        --toast-dialog-foreground-color,
        var(--color-foreground-on-information)
    );
    flex-shrink: 0;
    margin-inline-start: auto;
    padding: 0;
}
button.toast-dialog__close:focus {
    outline: 2px solid var(--color-foreground-on-information);
}
button.toast-dialog__close:focus,
button.toast-dialog__close:hover {
    color: var(--color-state-primary-hover);
}

button.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 {
    border-color: var(
        --toast-dialog-foreground-color,
        var(--color-foreground-on-accent)
    );
    border-style: solid;
    border-width: 1px;
    outline-offset: 2px;
}
.toast-dialog__footer button.btn--primary {
    background-color: var(
        --toast-dialog-foreground-color,
        var(--color-background-primary)
    );
    color: var(--toast-dialog-background-color, var(--color-foreground-accent));
}
.toast-dialog__footer button.btn--secondary {
    background-color: initial;
    color: var(
        --toast-dialog-foreground-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-information);
}
.toast-dialog__footer button.btn--primary:not([disabled]):focus,
.toast-dialog__footer button.btn--primary:not([disabled]):hover {
    background-color: var(--color-state-primary-hover);
}
.toast-dialog__footer button.btn--primary:not([disabled]):active {
    background-color: var(--color-state-primary-active);
}
.toast-dialog__footer button.btn--secondary:not([disabled]):focus,
.toast-dialog__footer button.btn--secondary:not([disabled]):hover {
    background-color: var(--color-state-accent-hover);
    border-color: var(
        --toast-dialog-foreground-color,
        var(--color-foreground-on-accent)
    );
    color: var(
        --toast-dialog-foreground-color,
        var(--color-background-primary)
    );
}
.toast-dialog__footer button.btn--secondary:not([disabled]):active {
    background-color: var(--color-state-accent-active);
    border-color: var(
        --toast-dialog-foreground-color,
        var(--color-foreground-on-accent)
    );
    color: var(
        --toast-dialog-foreground-color,
        var(--color-background-primary)
    );
}

@media (min-width: 512px) {
    .toast-dialog {
        border-radius: var(
            --toast-dialog-border-radius,
            var(--border-radius-100)
        );
        bottom: var(--spacing-200);
        left: var(--spacing-200);
        max-width: 480px;
        width: auto;
    }
    .toast-dialog__window {
        margin: var(--spacing-200) var(--spacing-300) var(--spacing-300);
    }
}