.root {
  width: 480px;
  position: fixed;
  right: 22px;
  bottom: 5px;
  z-index: 20;
}

.alert {
  padding: 24px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0px 10px 20px 0px #5b5b5b26;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;

  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  letter-spacing: 0;
  text-transform: capitalize;

  &::before {
    content: '';
    width: 20px;
    height: 20px;
    margin-right: 10px;
    background-size: cover;
    background-repeat: no-repeat;
  }
}

.success {
  color: #00b387;

  &::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='%2300B387'/%3E%3C/svg%3E");
  }
}

.error {
  color: #ff0101;

  &::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 {
  color: #000;

  &::before {
    background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8.5' r='8' fill='%23000'/%3E%3Crect width='1.333' height='4.667' rx='.3' transform='matrix(1 0 0 -1 7.333 12.5)' fill='%23fff'/%3E%3Crect width='1.333' height='1.333' rx='.3' transform='matrix(1 0 0 -1 7.333 6.5)' fill='%23fff'/%3E%3C/svg%3E");
  }
}

.loading {
  color: #3975e9;

  &::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 {
  align-self: flex-start;
  margin-left: auto;
  width: 12.5px;
  height: 12.5px;
}

.body {
  padding-right: 24px;

  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;

  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}