$alert-border-color: createColor(rgba(10, 10, 10, 0.25)) !default;
$alert-border-style: solid !default;
$alert-border-width: 1px !default;
$alert-radius: 0 !default;
$alert-padding: calculateRem(16) !default;
$alert-background-color: var(--color-white) !default;
$alert-color: var(--color-black) !default;

.alert {
  --border-color: #{$alert-border-color};
  --border-style: #{$alert-border-style};
  --border-width: #{$alert-border-width};
  --padding: #{$alert-padding};
  --background-color: #{$alert-background-color};
  --font-color: #{$alert-color};

  border-width: var(--border-width);
  border-style: var(--border-style);
  border-radius: var(--alert-border-radius);
  display: flex;
  flex-flow: column nowrap;
  padding: var(--padding);
  position: relative;
  @include element-color(var(--background-color), var(--border-color), var(--font-color));

  .button--close {
    position: absolute;
    right: .5rem;
    top: .5rem;
  }

  @each $color in $color-palette {
    &.is-#{nth($color, 1)} {
      --background-color: var(--color-#{nth($color, 1)}-alert);

      &.is-outline {
        --background-color: var(--color-white);
        --border-color: var(--color-#{nth($color, 1)});
        --font-color: var(--color-#{nth($color, 1)});
      }
    }
  }
}