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(--sl-background--alert, var(--sl-color--highlight));
  color: var(--sl-color--white);
  font-size: var(--sl-font-size--small);
  padding-bottom: var(--sl-padding-block--alert, var(--sl-gutter--minus));
  padding-top: var(--sl-padding-block--alert, var(--sl-gutter--minus));
  text-align: var(--sl-align--alert, center);

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

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

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

  a {
    --sl-color--link: var(--sl-color--white);
    --sl-background--link-state: rgba(0, 0, 0, 6.25%);
    --sl-border-color--link: #{rgba(
        brand.$sl-color--white,
        var(--opacity-border, 0.5)
      )};

    font-weight: typography.$sl-font-weight--bold;

    &:hover,
    &:focus {
      --opacity-border: 0.75;
    }

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

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

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

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