.alert {
  font-size: 14px;
  font-weight: 400;
  padding: 14px 15px;
  line-height: 1.45em;
  border: none;
  position: relative;
  border: 1px solid;
  border-radius: 7px;
}

.alert-link {
  font-size: inherit;
  text-transform: uppercase;
  font-weight: 600;
  position: absolute;
  right: 15px;
}

.alert-primary {
  background-color: rgba($accent-color1, 0.1);
  color: $accent-color1;
  border-color: rgba($accent-color1, 0.3);
}

.alert-secondary {
  background-color: rgba($accent-color2, 0.1);
  color: $accent-color2;
  border-color: rgba($accent-color2, 0.3);
}

.alert-success {
  background-color: rgba($accent-color4, 0.1);
  color: $accent-color4;
  border-color: rgba($accent-color4, 0.3);

  hr {
    border-color: rgba($accent-color4, 0.1);
  }
}

.alert-danger {
  background-color: rgba($accent-color5, 0.1);
  color: $accent-color5;
  border-color: rgba($accent-color5, 0.3);
}

.alert-warning {
  background-color: rgba($accent-color6, 0.1);
  color: $accent-color6;
  border-color: rgba($accent-color6, 0.3);
}

.alert-info {
  background-color: rgba($accent-color3, 0.1);
  color: $accent-color3;
  border-color: rgba($accent-color3, 0.3);
}

.alert-light {
  background-color: $base-color5;
  color: $base-color2;
  border-color: rgba($base-color5, 0.3);
}

.alert-dark {
  background-color: $base-color1;
  color: #fff;
}

.alert-primary .alert-link {
  color: $accent-color1;

  &:hover {
    color: rgba($accent-color1, 0.8);
  }
}

.alert-secondary .alert-link {
  color: $accent-color2;

  &:hover {
    color: rgba($accent-color2, 0.8);
  }
}

.alert-success .alert-link {
  color: $accent-color4;

  &:hover {
    color: rgba($accent-color4, 0.8);
  }
}

.alert-danger .alert-link {
  color: $accent-color5;

  &:hover {
    color: rgba($accent-color5, 0.8);
  }
}

.alert-warning .alert-link {
  color: $accent-color6;

  &:hover {
    color: rgba($accent-color6, 0.8);
  }
}

.alert-info .alert-link {
  color: $accent-color3;

  &:hover {
    color: rgba($accent-color3, 0.8);
  }
}

.alert-light .alert-link {
  color: $base-color1;

  &:hover {
    color: $base-color2;
  }
}

.alert-dark .alert-link {
  color: $accent-color1;

  &:hover {
    color: rgba($accent-color1, 0.8);
  }
}

.alert hr {
  margin: 15px 0;
}