/**
 * Alert.
 *
 * Override Bootstrap's alert with custom styles/colors.
 */

.alert {
  border-color: transparent;
  border-radius: var(--border-radius);
  font-size: var(--font-size);
  line-height: var(--line-height);
  margin-bottom: 1em;
  padding: var(--padding);
  position: relative;

  &.alert-danger,
  &.alert-success {
    color: var(--color-notification-color);
  }
  &.alert-info,
  &.alert-warning {
    color: #000;

    & .close:before,
    & .close:after {
      border-color: #000;
    }
  }
  &.alert-danger {
    background: var(--color-error);
  }
  &.alert-info {
    /* TODO: Refactor color into global variable */
    background: #00b9b8;
  }
  &.alert-success {
    background: var(--color-success);
  }
  &.alert-warning {
    /* TODO: Refactor color into global variable */
    background: color(rgb(247, 119, 0) w(+ 15%));
  }

  & a {
    color: inherit;
    text-decoration: underline;

    &:focus,
    &:hover,
    &:active {
      color: inherit;
      opacity: .667;
      text-decoration: none;
    }
  }

  & .close {
    color: transparent;
    height: 100%;
    opacity: 1;
    position: absolute;
    right: 0;
    text-shadow: none;
    top: 0;
    width: 1.5em;

    &:hover {
      opacity: .85;
    }
    &:focus,
    &:active {
      opacity: .75;
    }

    &:before,
    &:after {
      border-color: var(--color-notification-color);
      border-style: solid;
      content: '';
      display: block;
      height: 0;
      left: 50%;
      position: absolute;
      top: 50%;
    }
    &:before {
      border-width: 0 0 1px;
      margin: 0 0 0 -7px;
      width: 15px;
    }
    &:after {
      border-width: 0 1px 0 0;
      margin: -7px 0 0 0;
      height: 15px;
    }
    &:before,
    &:after {
      transform: rotate(45deg);
    }
  }
}

/**
 * Alerts with a 'close' button.
 */
.alert-close {
  padding-right: 2em;
}