@use 'modules/color_theme' as color;

.alert {
  padding: 1rem;
  border-style: solid;
  border-radius: 0.25rem;
  border-width: 2px;
  margin-top: 1rem;

  @include color.themed() {
    border-color: color.t('alert');
  }

  &__indicator {
    display: inline-block;
    border-radius: 9999px;
    padding: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    text-align: center;
    font-weight: 800;
    margin-right: 0.75rem;

    @include color.themed() {
      color: color.t('accent');
      background-color: color.t('alert');
    }
  }
}