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

.sl-c-alert {
  background: var(
    --alert-bg,
    color.adjust(theme.$sl-color--hopbush, $lightness: -10%)
  );
  color: theme.$sl-color--white;
  font-size: typography.$sl-font-size--small;
  padding-bottom: var(--alert-padding-block, var(--gutter-minus));
  padding-top: 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(theme.$sl-color--white, 0.5);
    color: theme.$sl-color--white;
    font-weight: typography.$sl-font-weight--bold;

    &:hover,
    &:focus {
      background: rgba(black, 0.0625);
      border-bottom-color: rgba(theme.$sl-color--white, 0.75);
    }

    &:active {
      border-bottom-color: theme.$sl-color--white;
    }
  }
}

.sl-c-alert--info {
  --alert-bg: theme.$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;
}