@import "../variables";
.alert-shown {
  .navbar {
    margin-top: 60px;
  }
  .app-container {
    margin-top: 130px;
  }
  &.hide {
    .navbar {
      margin-top: 0;
    }
    .app-container {
      margin-top: 70px;
    }
  }
}

.alert {
  border-radius: $border-radius-lg;
  line-height: $alert-line-height;
  color: $alert-color;
  font-size: $alert-font-size;
  text-align: left;
  .icon-alert {
    margin-right: 0.75rem;
  }
  text-transform: none;
}

.alert-danger {
  background-color: $alert-danger-bg;
  border-color: $alert-danger-border-color;
}

.alert-warning {
  background-color: $alert-warning-bg;
  border-color: $alert-warning-border-color;
}
.alert {
  padding-top: $spacer / 2;
  padding-bottom: $spacer / 2;
  padding-left: $spacer / 2;
  padding-right: $spacer / 2;
}
.alert-info {
  background-color: $alert-info-bg;
  border-color: $alert-info-border-color;

  .close-btn {
    margin-top: -3px;
    font-size: 20px;
    color: $alert-announcement-close-btn;
  }
  .title {
    font-weight: 500;
    color: $body-color;
  }
  a {
    color: $primary;
    font-weight: normal;
  }
  strong {
    font-weight: 500;
    color: $body-color;
  }
}
.alert-success {
  background-color: $alert-success-bg;
  border-color: $alert-success-border-color;
  .title {
    font-weight: 500;
    margin-bottom: 2px;
    color: $body-color;
  }
  a {
    color: $primary;
    font-weight: normal;
  }
  strong {
    font-weight: 500;
    color: $body-color;
  }
}

.dark {
  .alert {
    color: $alert-color-dark;
    background-color: $success-solid-dark-alert;
  }
  .alert-info {
    background-color: $info-solid-dark-alert;
    .title {
      color: $text-icon-light;
    }
    a {
      color: $primary;
    }
    strong {
      color: $text-icon-light;
    }
  }
  .alert-warning {
    background-color: $warning-solid-dark-alert;
  }
  .alert-danger{
    background-color: $danger-solid-dark-alert
  }
}
.text-info {
  color: $primary !important;
}
