@use '../../assets/styles/variables' as *; @use '../../assets/styles/mixins' as *; @use '../../assets/styles/headings' as *; .root { width: 390px; position: fixed; right: 22px; bottom: 5px; z-index: 20; } .alert { padding: 15px; background-color: #202022; border-radius: $borderRadiusLarge; border: $borderModal; box-shadow: 0px 3px 5px 0px #00000033, 0px 1px 18px 0px #0000001f, 0px 6px 10px 0px #00000024; } .header { @include heading(14px, 21px, 500); display: flex; align-items: center; margin-bottom: 10px; text-transform: capitalize; &::before { @include square(16px); content: ''; display: inline-block; margin-right: 10px; background-size: cover; background-repeat: no-repeat; } } .success { color: $successColor; &::before { background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5.5a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-.96 11.465L3.728 8.152l.904-.904 2.908 2.907 4.827-4.827.905.904-5.732 5.733Z' fill='%232BD071'/%3E%3C/svg%3E"); } } .error { color: $errorColor; &::before { background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0C3.589 0 0 3.589 0 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8Zm3.236 10.293c.13.13.13.341 0 .471l-.472.472a.333.333 0 0 1-.471 0L8 8.943l-2.293 2.293a.334.334 0 0 1-.471 0l-.472-.472a.333.333 0 0 1 0-.471L7.057 8 4.764 5.707a.333.333 0 0 1 0-.471l.472-.472c.13-.13.34-.13.471 0L8 7.057l2.293-2.293c.13-.13.341-.13.471 0l.472.472c.13.13.13.34 0 .471L8.943 8l2.293 2.293Z' fill='%23F24A4A'/%3E%3C/svg%3E"); } } .info { &::before { background-image: url("data:image/svg+xml,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8.5' r='8' fill='%23fff'/%3E%3Crect width='1.333' height='4.667' rx='.3' transform='matrix(1 0 0 -1 7.333 12.5)' fill='%23282828'/%3E%3Crect width='1.333' height='1.333' rx='.3' transform='matrix(1 0 0 -1 7.333 6.5)' fill='%23282828'/%3E%3C/svg%3E"); } } .loading { color: $tertiaryColor; &::before { background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 2.5c3.393 0 6.474 1.361 8.729 3.564l1.418-1.418a.498.498 0 0 1 .834.216l2 7a.5.5 0 0 1-.618.618l-7-1.999a.5.5 0 0 1-.216-.835L21.6 8.192A9.446 9.446 0 0 0 15 5.5c-5.239 0-9.5 4.261-9.5 9.5 0 5.238 4.261 9.5 9.5 9.5 5.238 0 9.5-4.262 9.5-9.5 0-.248-.018-.492-.038-.736l3.035.875C27.422 21.968 21.846 27.5 15 27.5 8.107 27.5 2.5 21.892 2.5 15 2.5 8.107 8.107 2.5 15 2.5Z' fill='%233975E9'/%3E%3C/svg%3E"); animation: rotating 1s linear infinite; } } .button { margin-left: auto; } .body { overflow: hidden; text-overflow: ellipsis; } @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }