@use "./../../../styles/tokens/space";
@use "./../../../styles/tokens/breakpoint";
@use "./../../../styles/tokens/color";
@use "./../../../styles/tools/generate";
@use "./../../../styles/tools/convert";
@use "./../../../styles/typography/config" as typography;
@use "sass:map" as sass-map;
@use "./config";

@mixin alert-base($config: config.$base) {
  display: flex;

  @include generate.css-map($config);
}

@mixin alert-variants() {
  border-color: var(--color-border-information);
  background-color: var(--color-fill-information);

  &--success {
    border-color: var(--color-border-positive);
    background-color: var(--color-fill-positive);
  }
  &--info {
    border-color: var(--color-border-information);
    background-color: var(--color-fill-information);
  }
  &--warning {
    border-color: var(--color-border-warning);
    background-color: var(--color-fill-warning);
  }
  &--danger {
    border-color: var(--color-border-negative);
    background-color: var(--color-fill-negative);
  }
}

@mixin alert-icon {
  margin-right: space.get("small");
  line-height: 1;
}

@mixin alert-content {
  flex-shrink: 1;
  flex-grow: 1;
  margin-top: convert.to-rem(2px);

  p {
    font-size: convert.to-rem(16px);
    line-height: convert.to-rem(24px);
    font-weight: 400;
    letter-spacing: convert.to-rem(-0.1px);
  }

  > :last-child {
    margin-bottom: space.get("xsmall") !important;
  }
}

@mixin alert-close {
}

@mixin alert-title($config: config.$title) {
  @include generate.css-map($config);
}

@mixin buttons-after-title() {
  margin-top: space.get("small");
}