blog/src/components/molecules/Web3Donation/Alert.module.scss

@import 'variables';
@import 'mixins';

.alert {
  font-size: $font-size-small;
  display: inline-block;

  &:empty {
    display: none;
  }

  &::after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    animation: ellipsis steps(4, end) 1s infinite;
    content: '\2026'; // ascii code for the ellipsis character
    width: 0;
    position: absolute;
  }
}

.error {
  composes: alert;
  color: darken($alert-error, 60%);

  :global(.dark) & {
    color: darken($alert-error, 40%);
  }

  &::after {
    display: none;
  }
}

.success {
  composes: alert;
  color: darken($alert-success, 60%);

  &::after {
    display: none;
  }
}

@keyframes ellipsis {
  to {
    width: 0.75rem;
  }
}