smart-webcomponents-react/source/styles/components/smart.toast.css

[](https://jqwidgets.com/license/)

smart-toast,smart-toast .smart-toast-container{font-family:var(--smart-font-family-icon);display:none}.smart-toast-container.smart-toast-container-bottom-left,.smart-toast-container.smart-toast-container-bottom-right,.smart-toast-container.smart-toast-container-custom,.smart-toast-container.smart-toast-container-top-left,.smart-toast-container.smart-toast-container-top-right{width:var(--smart-toast-container-default-width);padding:5px;position:fixed;overflow-y:hidden;box-sizing:border-box;z-index:var(--smart-editor-drop-down-z-index)}.smart-toast-container.smart-toast-container-top-left{top:0;left:0}.smart-toast-container.smart-toast-container-top-right{top:0;right:0}.smart-toast-container.smart-toast-container-bottom-left{bottom:0;left:0}.smart-toast-container.smart-toast-container-bottom-right{bottom:0;right:0}.smart-toast-container.smart-toast-container-modal{width:100%;height:100%}.smart-toast-container.smart-toast-container-modal:not(:empty){background-color:rgba(0,0,0,.5);display:flex;flex-direction:column;align-items:center;justify-content:center;position:fixed;left:0;top:0;z-index:var(--smart-editor-drop-down-z-index)}.smart-toast-container.smart-toast-container-modal .smart-toast-item{width:200px}.smart-toast-item{display:block;width:100%;margin-bottom:2px;opacity:.8;user-select:none;background-color:var(--smart-surface);border-color:var(--smart-border);color:var(--smart-surface-color)}.smart-toast-item:hover{opacity:1}.smart-toast-item .smart-toast-item-header{display:flex;justify-content:flex-end;height:var(--smart-toast-header-height)}.smart-toast-item .smart-toast-item-header .smart-toast-item-close-button{font-family:var(--smart-font-family-icon);user-select:none;position:relative;cursor:pointer;margin:5px;opacity:1;display:none;width:var(--smart-font-size);height:var(--smart-font-size);color:inherit}.smart-toast-item .smart-toast-item-container{padding:0 0 10px;display:flex;align-items:center;position:relative;top:-4px}.smart-toast-item .smart-toast-item-container .smart-toast-item-icon{width:25px;height:25px;margin:0 15px;display:inline-block;background-repeat:no-repeat}.smart-toast-item .smart-toast-item-container .smart-toast-item-icon:after{content:var(--smart-toast-item-icon);width:100%;height:100%;display:flex;justify-content:center;align-items:center;font-family:var(--smart-font-family-icon);font-size:1.75em}.smart-toast-item .smart-toast-item-container .smart-toast-item-content{text-align:center;opacity:1;font-family:inherit;font-size:inherit;font-weight:inherit;color:inherit;text-overflow:ellipsis;overflow:hidden;display:inline-block;width:calc(100% - 110px);margin:0 15px}.smart-toast-item[show-close-button] .smart-toast-item-header .smart-toast-item-close-button{display:block}.smart-toast-item[show-close-button] .smart-toast-item-header .smart-toast-item-close-button:after{font-family:var(--smart-font-family-icon);content:var(--smart-icon-close);font-size:inherit;user-select:none;cursor:pointer;color:inherit;position:absolute;left:0;top:0;display:block}.smart-toast-item.primary,.smart-toast-item.primary .smart-toast-item-header .smart-toast-item-close-button{color:var(--smart-primary-color)}.smart-toast-item[opened]{opacity:.8}.smart-toast-item[opened]:hover{opacity:1}.smart-toast-item.blink{animation:blink normal 1s infinite ease-in}.smart-toast-item.primary{background-color:var(--smart-primary);border-color:var(--smart-primary)}.smart-toast-item.secondary{background-color:var(--smart-secondary);border-color:var(--smart-secondary);color:var(--smart-secondary-color)}.smart-toast-item.secondary .smart-toast-item-header .smart-toast-item-close-button{color:var(--smart-primary-color)}.smart-toast-item.success{background-color:var(--smart-success);border-color:var(--smart-success);color:var(--smart-success-color)}.smart-toast-item.success .smart-toast-item-header .smart-toast-item-close-button{color:var(--smart-primary-color)}.smart-toast-item.error{background-color:var(--smart-error);border-color:var(--smart-error);color:var(--smart-error-color)}.smart-toast-item.error .smart-toast-item-header .smart-toast-item-close-button{color:var(--smart-primary-color)}.smart-toast-item.info{background-color:var(--smart-info);border-color:var(--smart-info);color:var(--smart-info-color)}.smart-toast-item.info .smart-toast-item-header .smart-toast-item-close-button{color:var(--smart-primary-color)}.smart-toast-item.warning{background-color:var(--smart-warning);border-color:var(--smart-warning);color:var(--smart-warning-color)}.smart-toast-item.warning .smart-toast-item-header .smart-toast-item-close-button{color:var(--smart-primary-color)}.smart-toast-item.light{background-color:var(--smart-light);border-color:var(--smart-light);color:var(--smart-light-color)}.smart-toast-item.light .smart-toast-item-header .smart-toast-item-close-button{color:var(--smart-primary-color)}.smart-toast-item.dark{background-color:var(--smart-dark);border-color:var(--smart-dark);color:var(--smart-dark-color)}.smart-toast-item.dark .smart-toast-item-header .smart-toast-item-close-button{color:var(--smart-primary-color)}.smart-toast-item.mail{background-color:#337ab7;border-color:#337ab7;color:#fff}.smart-toast-item.mail .smart-toast-item-header .smart-toast-item-close-button{color:#fff}.smart-toast-item.time{background-color:#363636;border-color:#363636;color:#fff}.smart-toast-item.time .smart-toast-item-header .smart-toast-item-close-button{color:#fff}.smart-toast-item.info .smart-toast-item-icon:after{--smart-toast-item-icon:var(--smart-icon-help-circled)}.smart-toast-item.warning .smart-toast-item-icon:after{--smart-toast-item-icon:var(--smart-icon-attention)}.smart-toast-item.success .smart-toast-item-icon:after{--smart-toast-item-icon:var(--smart-icon-check)}.smart-toast-item.error .smart-toast-item-icon:after{--smart-toast-item-icon:var(--smart-icon-block)}.smart-toast-item.mail .smart-toast-item-icon:after{--smart-toast-item-icon:var(--smart-icon-mail)}.smart-toast-item.time .smart-toast-item-icon:after{--smart-toast-item-icon:var(--smart-icon-clock)}.smart-toast-item[right-to-left]>.smart-container{direction:rtl}@keyframes blink{50%{opacity:.5}}