.alert {
  --#{$prefix}alert-gap: #{$alert-gap};
  --#{$prefix}alert-close-icon-size: #{$alert-close-icon-size};
  --#{$prefix}alert-icon-size: var(--#{$prefix}ref-spacer-6);

  display: flex;
  flex-direction: row;
  gap: var(--#{$prefix}alert-gap);
  align-items: flex-start;

  .alert-text {
    flex-grow: 1;
  }

  .alert-icon {
    --#{$prefix}icon-size: var(--#{$prefix}alert-icon-size);
    --#{$prefix}icon-color: var(--#{$prefix}alert-icon-color);

    &:not(.d-icon) {
      color: var(--#{$prefix}icon-color);
    }
  }
}