@import 'public-booking/main_dependencies';

.message {
  @extend .alert;
  @include clearfix;
  border-radius: 0;

  &__text {
    @include make-xs-column(12);
    @include make-md-column(10);
    padding-left: 0;
    text-align: center;

    @include desktop {
      text-align: left;
      height: 35px;
      line-height: 35px;
    }
  }

  &__action {
    @include make-xs-column(12);
    @include make-md-column(2);
    padding-right: 0;
    text-align: center;
    margin-top: 10px;

    @include desktop {
      margin-top: 0;
      text-align: right;
    }

    @include mobile-only {
      padding-left: 0;
      padding-right: 15px;
    }
  }

  &--is-inactive {
    pointer-events: none;
    opacity: .5;
  }

  &--info {
    .message__text {
      &:before {
        content: '\f05a';
        font-family: FontAwesome, sans-serif;
        margin-right: 10px;
      }
    }

    @include alert-variant(white, $brand-info, $brand-info);
  }

  &--danger {
    .message__text {
      &:before {
        content: '\f071';
        font-family: FontAwesome, sans-serif;
        margin-right: 10px;
      }
    }

    @include alert-variant(white, $brand-danger, $brand-danger);
  }
}