@charset "utf-8";

.#{$travlr-ui} {
  .#{$travlr-prefix} {
    &alert {
      width: 100%;
      color: white;
      position: fixed;
      left: 0;
      top: 12px;
      z-index: 1001;
      opacity: 0;
      visibility: hidden;
      @include transition($primary-transition);
      @include transform(translate3d(0,-100%,0));

      @include mobile {
        top: 0 !important;
      }

      &-body {
        font-weight: $weight-bold;
        font-size: $size-text-6;
        height: 40px;
        line-height: 40px;
        display: block;
        max-width: 560px;
        margin: 0 auto;
        padding: 0 24px;
        border-radius: $radius;
        background-color: $color-primary;
        max-width: 560px;
        min-width: 560px;
        @include box-shadow($primary-box-shadow);
        @include clearfix;
        @include typography-text-normal;

        @include mobile {
          max-width: 100%;
          min-width: 100%;
          border-radius: 0 !important;
          height: 48px !important;
          line-height: 48px !important;
        }
      }

      // Trigger Show
      &.active {
        opacity: 1 !important;
        visibility: visible !important;
        @include transform(translate3d(0,0,0) !important);
      }

      // Background
      &-danger {background-color: $color-danger !important}
      &-warning {background-color: $color-warning !important}
      &-success {background-color: $color-success !important}

      // Icons
      &-icon {
        &-info {
          margin-right: 16px;
          font-size: $icon-medium;
          color: white;
        }

        &-close {
          float: right;
          font-size: $icon-medium;
          color: white;
        }
      }
    }
    &alert-alt {
      width: 100%;
      border-radius: 4px;
      opacity: 0;
      visibility: hidden;
      display: none;
      @include transition($primary-transition);

      &-body {
        padding: 14px 16px;
        display: table;
        width: 100%;
      }

      // Trigger Show
      &.active {
        display: block;
        opacity: 1 !important;
        visibility: visible !important;
      }

      // Background
      &.default {
        color: $color-grey-darkest;
        background-color: rgba($color-grey-med, 0.1) !important;
        border: 1px solid $color-grey-med;

        & .t-icon {
          color: $color-grey-med !important;

          &:after {
            color: $color-grey-med !important;
            content: "\ea83";
            font-size: 24px;
          }
        }
      }
      &.danger {
        color: $color-danger;
        background-color: rgba($color-danger, 0.1) !important;
        border: 1px solid $color-danger;

        & .t-icon {
          color: $color-danger !important;

          &:after {
            color: $color-danger !important;
            content: '\ea4a';
            font-size: 24px;
          }
        }
      }
      &.warning {
        color: $color-warning;
        background-color: rgba($color-warning, 0.1) !important;
        border: 1px solid $color-warning;

        & .t-icon {
          color: $color-warning !important;

          &:after {
            color: $color-warning !important;
            content: "\ea60";
            font-size: 24px;
          }
        }
      }
      &.success {
        color: $color-success;
        background-color: rgba($color-success, 0.1) !important;
        border: 1px solid $color-success;

        & .t-icon {
          color: $color-success !important;

          &:after {
            color: $color-success !important;
            content: "\ea3e";
            font-size: 24px;
          }
        }
      }

      &-icon {
        display: table-cell !important;
        vertical-align: middle;
        width: 24px;
        padding-right: 12px;
      }

      &-text {
        display: table-cell;
        vertical-align: middle;
        font-size: $size-text-body;
        line-height: $line-height-text-body;
        font-weight: normal;
        @include typography-text-normal;
      }
    }
  }
}