sass-site/source/assets/sass/components/_alerts.scss

@use 'sass:color';
@use '../functions';
@use '../config/color/brand';
@use '../visual-design/typography';

.sl-c-alert {
  background: var(--alert-bg, var(--highlight));
  color: var(--sl-color--white);
  font-size: typography.$sl-font-size--small;

  padding: {
    top: var(--alert-padding-block, var(--gutter-minus));
    bottom: var(--alert-padding-block, var(--gutter-minus));
  }

  text-align: var(--alert-align, center);

  p,
  ul,
  dl {
    &:first-child {
      margin-top: 0;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  p,
  li,
  dd {
    max-width: none;
  }

  a {
    border-bottom-color: rgba(
      brand.$sl-color--white,
      var(--opacity-border, 0.5)
    );
    color: var(--sl-color--white);
    font-weight: typography.$sl-font-weight--bold;

    &:hover,
    &:focus {
      background: rgba(black, 0.0625);

      --opacity-border: 0.75;
    }

    &:active {
      --opacity-border: 1;
    }
  }
}

.sl-c-alert--info {
  --alert-bg: var(--sl-color--midnight-blue);
}

.sl-c-alert--special {
  --alert-align: left;
  --alert-bg: black;
  --alert-padding-block: var(--gutter-triple);
}

.sl-c-alert-title {
  margin-top: 0;
}