//---------------------------------------------------------------------------
// Component        : MESSAGING
// DisplayType      : Inline, Block           => (inline, block)
// MessageType      : Error, Success, Alert   => (error, success, alert)
//---------------------------------------------------------------------------
// Declaration      : DisplayType-MessageType
// Example          : .inline-error, .block-success, .inline-warning
// --------------------------------------------------------------------------

.inline {
  // -----------------------------------
  // Messaging Component Variables
  // -----------------------------------
  $base-message-padding: 6px;
  $message-icon-size: 40px;

  // -----------------------------------
  // Messaging Component Mixins
  // -----------------------------------
  @mixin inline-messaging($background-color, $text-color) {
    background: $background-color;
    color: $text-color;
    position: relative;
    width: calc(100% - #{$base-message-padding * 2});
    padding: $base-message-padding;
    padding-left: $message-icon-size - $base-message-padding;
    margin: 12px 0 12px $base-message-padding * 2;
    @include font-size($base-font-size - 4);
    line-height: 1.5;
    display: inline-block;
    clear: both;
  }

  @mixin inline-icon($border-color, $icon-path) {
    content: '';
    width: $message-icon-size;
    height: $message-icon-size;
    border: 4px solid $border-color;
    border-radius: $message-icon-size / 2;
    position: absolute;
    top: -$base-message-padding;
    left: -$base-message-padding * 2;
    background: $white url($icon-path) no-repeat center;
    background-size: 75% 75%;
  }

  /// Inline Error Messaging
  &-error {
    @include inline-messaging($red, $white);

    a {
      color: $white;
      text-decoration: underline;
    }

    &:before {
      @include inline-icon($red, '/images/us/od/messaging/error.svg');
    }
  }

  /// Inline Success Messaging
  &-success {
    @include inline-messaging($green, $white);

    a {
      color: $white;
      text-decoration: underline;
    }

    &:before {
      @include inline-icon($green, '/images/us/od/messaging/success.svg');
    }
  }

  /// Inline Warning Messaging
  &-warning {
    @include inline-messaging($yellow, $black);

    a {
      text-decoration: underline;
    }

    &:before {
      @include inline-icon($yellow, '/images/us/od/messaging/warning.svg');
    }
  }
}


.block {
  // -----------------------------------
  // Messaging Component Variables
  // -----------------------------------
  $base-message-padding: 6px;
  $message-icon-size: 40px;

  // -----------------------------------
  // Messaging Component Mixins
  // -----------------------------------
  @mixin block-messaging($msg-color) {
    background: $white;
    color: $black;
    border: 1px solid $gray-medium;
    border-left: 10px solid $msg-color;
    border-radius: 6px;
    position: relative;
    width: 100%;
    min-height: 55px;
    padding: $base-message-padding;
    padding-left: $message-icon-size + 10;
    padding-right: $base-message-padding * 5;
    margin: 18px 0;
    @include font-size($base-font-size - 4);
    line-height: 1.5;
    clear: both;
  }

  &-icon svg, &-icon img {
    width: $message-icon-size;
    height: $message-icon-size;
    position: absolute;
    top: $base-message-padding;
    left: $base-message-padding;
    border: 4px solid $white;
    border-radius: $message-icon-size / 2;
  }

  &-copy {
    vertical-align: middle;
    display: inline-block;
    padding: 10px 0;
  }

  /// Block Error Messaging
  &-msg-error {
    @include block-messaging($red);
  }

  /// Block info Messaging
  &-msg-info {
    @include block-messaging($blue-medium);
  }

  /// Block Success Messaging
  &-msg-success {
    @include block-messaging($green);
  }

  /// Block Warning Messaging
  &-msg-warning {
    @include block-messaging($yellow);
  }

  &-close-btn{
    height: 20px;
    width: 20px;
    position: absolute;
    top: 5px;
    right: 0;
    line-height: 50px;
    z-index: 10;
    cursor: pointer;

    &:before, &:after {
      transform: rotate(-45deg);
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -10px;
      display: block;
      height: 1px;
      width: 50%;
      background-color: $gray;
    }

    &:after {
      transform: rotate(45deg);
    }
  }
}