| <style> | |
| :host { | |
| --cr-toast-background: #323232; | |
| --cr-toast-button-color: var(--google-blue-300); | |
| --cr-toast-text-color: #fff; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :host { | |
| --cr-toast-background: var(--google-grey-900) | |
| linear-gradient(rgba(255, 255, 255, .06), rgba(255, 255, 255, .06)); | |
| --cr-toast-button-color: var(--google-blue-refresh-300); | |
| --cr-toast-text-color: var(--google-grey-200); | |
| } | |
| } | |
| :host { | |
| align-items: center; | |
| background: var(--cr-toast-background); | |
| border-radius: 4px; | |
| bottom: 0; | |
| box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.28); | |
| box-sizing: border-box; | |
| display: flex; | |
| margin: 24px; | |
| max-width: 568px; | |
| min-height: 52px; | |
| min-width: 288px; | |
| opacity: 0; | |
| padding: 0 24px; | |
| position: fixed; | |
| transform: translateY(100px); | |
| transition: opacity 300ms, transform 300ms; | |
| visibility: hidden; | |
| z-index: 1; | |
| } | |
| :host-context([dir=ltr]) { | |
| left: 0; | |
| } | |
| :host-context([dir=rtl]) { | |
| right: 0; | |
| } | |
| :host([open]) { | |
| opacity: 1; | |
| transform: translateY(0); | |
| visibility: visible; | |
| } | |
| /* Note: this doesn't work on slotted text nodes. Something like | |
| * <cr-toast>hey!</cr-toast> wont get the right text color. */ | |
| :host ::slotted(*) { | |
| color: var(--cr-toast-text-color); | |
| } | |
| :host ::slotted(cr-button) { | |
| background-color: transparent !important; | |
| border: none !important; | |
| color: var(--cr-toast-button-color) !important; | |
| margin-inline-start: 32px !important; | |
| min-width: 52px !important; | |
| padding: 8px !important; | |
| } | |
| :host ::slotted(cr-button:hover) { | |
| background-color: transparent !important; | |
| } | |
| </style> | |
| <slot></slot> |