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

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

  padding: {
    top: var(--alert-padding-block, var(--sl-gutter--minus));
    bottom: var(--alert-padding-block, var(--sl-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 {
      --color-link-bg: rgba(0, 0, 0, 6.25%);
      --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(--sl-gutter--triple);
}

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