@import "../../styles/common";

$alert-padding-y: ($spacing-small + $spacing-extra-small);
$alert-padding-x: $spacing-medium;

.alert {
  display: flex;
  flex-direction: row;
  line-height: $line-height-copy;
  border-radius: $border-radius-2;
  padding: $alert-padding-y $alert-padding-x;
}

.body {
  > p {
    margin: $spacing-small 0;
  }
  > p:first-child {
    margin-top: 0;
  }
  > p:last-child {
    margin-bottom: 0;
  }
}

.neutral {
  background: $near-white;
  border: 1px solid $black-10;
  color: $near-black;
}

.success {
  background: $green;
  border: 1px solid $black-05;
  color: $white;
}

.danger {
  background: $dark-red;
  border: 1px solid $black-05;
  color: $white;
}

.dismissButton {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  opacity: 0.66;
  font-size: $font-size-3;
  padding: 0 $spacing-medium;
  margin-top: -($alert-padding-y + $spacing-extra-small);
  margin-bottom: -$alert-padding-y;
  margin-left: auto;
  margin-right: -$alert-padding-x;
}