:root {
  --alert-breaker-background-color: var(--color-midnight);
  --alert-breaker-color: var(--color-white);
  --alert-breaker-gap: 4rem;
}

.alert-breaker {
  align-items: flex-start;
  background-color: var(--alert-breaker-background-color);
  color: var(--alert-breaker-color);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--alert-breaker-gap) calc(var(--alert-breaker-gap) * 0.5);

  @include use-responsive-sizing(padding-block, responsive-map(xs 4rem, l 4rem));
  @include use-responsive-sizing(padding-inline, responsive-map(xs 2rem, xl 4rem));

  @include mq($from: m) {
    flex-wrap: nowrap;
    gap: var(--alert-breaker-gap);
  }
}

.alert-breaker__badge {
  flex-shrink: 0;

  @include mq($until: m) {
    --badge-size: 8rem;
  }
}

.alert-breaker__content {
  max-inline-size: 55rem;

  @include mq($until: m) {
    flex-basis: calc(100% - 10rem);
  }
}

.alert-breaker__icon-button {
  flex-shrink: 0;

  @include mq($from: m) {
    margin-inline-start: auto;
  }
}

.alert-breaker__text {
  margin-block-start: 2rem;
}