@charset "utf-8";
// Copyright 2019, Oath Inc.
// Licensed under the terms of the MIT license. See LICENSE file in project root for terms.

@import '../maps/color-maps.scss';
@import '../utilities/global-variables.scss';
 
$alert-bg-color: map-get($denali-grey-colors,"100") !default;
$alert-text-color: null !default;
$alert-corner-radius: $border-radius-sm !default;
$alert-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16) !default;
$alert-border-color: map-get($denali-grey-colors,"500") !default;
$alert-border-width: 4px !default;
$alert-border-style: solid !default;
$alert-close-icon-color: map-get($denali-grey-colors,"800") !default;
$alert-inline-text-color: map-get($denali-grey-colors,"800") !default;
$alert-inline-bg-color: map-get($denali-grey-colors,"300") !default;
$alert-inline-font-size: inherit !default;
$alert-inline-alignment-text: center !default;
$alert-inline-alignment-justify-content: center !default;
$alert-inline-padding: 4px 10px !default;
$alert-content-line-height: $line-height-compact !default;

@mixin alerts-default {
  .alert {
    // STRUCTURE
    width: 400px;
    display: flex;
    box-sizing: border-box;
    // STYLE
    background: $alert-bg-color;
    color: $alert-text-color;
    border-radius: $alert-corner-radius;
    box-shadow: $alert-shadow;
    border-top-width: $alert-border-width;
    border-top-style: $alert-border-style;
    border-top-color: $alert-border-color;

    @include media-size-down(mobile) {
      width: 100%;
    }

    div {
      margin: 17px 0px 18px 0px;
      flex: auto;
      overflow: hidden;
      h5 {
        margin-bottom: 8px;
      }
      p {
        margin-top: 4px;
        font-size: 12px !important;
        margin-bottom: 0px;
        line-height: $alert-content-line-height;
      }
    }

    // STATUS COLOR
    .d-icon {
      margin: 14px;
      font-size: 28px !important;
      color: $alert-border-color;
    }

    // CLOSE ICON
    .close {
      display: block;
      padding: 16px 0px;
      .d-icon {
        font-size: 24px !important;
        color: $alert-close-icon-color !important;
      }
    }

    &.is-inline {
      justify-content: $alert-inline-alignment-justify-content;
      padding: $alert-inline-padding;
      // STYLE
      background: $alert-inline-bg-color;
      color: $alert-inline-text-color;
      font-size: $alert-inline-font-size;
      // RESETS
      box-shadow: none !important;
      border: none !important;
      border-radius: 0px !important;
      // STRUCTURE
      width: 100%;
      display: flex !important;

      p {
        text-align: $alert-inline-alignment-text;
        overflow: hidden;
      }
    }

    // Block Level Alerts
    &.is-block {      
      border-top: none;
      position: relative;
      box-shadow: none !important;
      width: 100%;
      background: rgba($alert-border-color, 0.1);
      border-left-width: $alert-border-width;
      border-left-style: $alert-border-style;
      border-left-color: $alert-border-color;

      &.is-info {
        background: rgba(map-get($denali-status-colors,"info"), 0.06);
      }

      &.is-warning {
        background: rgba(map-get($denali-status-colors,"warning"), 0.06);
      }

      &.is-success {
        background: rgba(map-get($denali-status-colors,"success"), 0.06);
      }

      &.is-danger {
        background: rgba(map-get($denali-status-colors,"danger"), 0.06);
      }

      p {
        font-size: 1.4rem !important;
      }
    }


    // STATUS MODIFIERS
    &.is-info {
      border-color: map-get($denali-status-colors,"info");
      .d-icon {
        color: map-get($denali-status-colors,"info");
      }
    }
    &.is-warning {
      border-color: map-get($denali-status-colors,"warning");
      .d-icon {
        color: map-get($denali-status-colors,"warning");
      }
    }
    &.is-success {
      border-color: map-get($denali-status-colors,"success");
      .d-icon {
        color: map-get($denali-status-colors,"success");
      }
    }
    &.is-danger {
      border-color: map-get($denali-status-colors,"danger");
      .d-icon {
        color: map-get($denali-status-colors,"danger");
      }
    }
  }
}

@mixin alerts-theme {
  .alert {
    @if variable-exists(alert-bg-color) {
      background: $alert-bg-color;
    }

    @if variable-exists(alert-text-color) {
      color: $alert-text-color;
    }

    @if variable-exists(alert-corner-radius) {
      border-radius: $alert-corner-radius;
    }

    @if variable-exists(alert-shadow) {
      box-shadow: $alert-shadow;
    }

    @if variable-exists(alert-border-width) {
      border-top-width: $alert-border-width;
    }

    @if variable-exists(alert-border-style) {
      border-top-style: $alert-border-style;
    }

    @if variable-exists(alert-border-color) {
      border-top-color: $alert-border-color;
    }

    div {
      p {
        line-height: $alert-content-line-height;
      }
    }

    @if variable-exists(alert-border-color) {
      .d-icon {
        color: $alert-border-color;
      }
    }

    @if variable-exists(alert-close-icon-color) {
      .close {
        .d-icon {
          color: $alert-close-icon-color !important;
        }
      }
    }

    &.is-inline {
      @if variable-exists(alert-inline-alignment-justify-content) {
        justify-content: $alert-inline-alignment-justify-content;
      }

      @if variable-exists(alert-inline-padding) {
        padding: $alert-inline-padding;
      }

      @if variable-exists(alert-inline-bg-color) {
        background: $alert-inline-bg-color;
      }

      @if variable-exists(alert-inline-text-color) {
        color: $alert-inline-text-color;
      }

      @if variable-exists(alert-inline-font-size) {
        font-size: $alert-inline-font-size;
      }


      @if variable-exists(alert-inline-alignment-text) {
        p {
          text-align: $alert-inline-alignment-text;
        }
      }
    }

    &.is-block {
      border-top: none;
      background: rgba($alert-border-color, 0.1);
      border-left-width: $alert-border-width;
      border-left-style: $alert-border-style;
      border-left-color: $alert-border-color;

      &.is-info {
        background: rgba(map-get($denali-status-colors,"info"), 0.06);
      }

      &.is-warning {
        background: rgba(map-get($denali-status-colors,"warning"), 0.06);
      }

      &.is-success {
        background: rgba(map-get($denali-status-colors,"success"), 0.06);
      }

      &.is-danger {
        background: rgba(map-get($denali-status-colors,"danger"), 0.06);
      }
    }

    @if variable-exists(color-status-information) {
      &.is-info {
        border-color: map-get($denali-status-colors,"info");

        .d-icon {
          color: map-get($denali-status-colors,"info");
        }
      }
    }

    @if variable-exists(color-status-warning) {
      &.is-warning {
        border-color: map-get($denali-status-colors,"warning");

        .d-icon {
          color: map-get($denali-status-colors,"warning");
        }
      }
    }

    @if variable-exists(color-status-success) {
      &.is-success {
        border-color: map-get($denali-status-colors,"success");

        .d-icon {
          color: map-get($denali-status-colors,"success");
        }
      }
    }

    @if variable-exists(color-status-danger) {
      &.is-danger {
        border-color: map-get($denali-status-colors,"danger");

        .d-icon {
          color: map-get($denali-status-colors,"danger");
        }
      }
    }
  }
}