.alert
  position: relative
  display: flex
  align-items: center
  padding: 0.75em
  border-radius: 1.5em
  margin-bottom: $margin
  _alert-color: $gray $dark

  // generate color modifiers
  for color in $modifiers-color
    $accent = lookup('$' + color)
    $text = isLight(color) ? $black : $white

    &.is-{color}
      _alert-color: $accent $text

  &.is-outlined
    background-color: transparent
    border-style: solid
    border-width: $border

  &.is-float
    box-shadow: boxShadow(large)

.alert-dismiss
  margin-{$dir-start}: $margin
  padding: 0
  border: 0
  background-color: transparent
  cursor: pointer
  _icon-color: inherit

  &:focus
    outline: none

  &:hover
    _icon-color: $primary

.alert-content
  flex: 1 1 0%