@import "../base/colors";
@import "../base/variables";
@import "../base/mixins";


@mixin message-level($background, $color) {
  @include box-shadow(0.167em 0, 0, 0, $background, true);
  background: rgba($background, 0.15);

  .button {
    color: $color;
    border: solid 1px;
    background-color: transparent;
    margin-top: 1em;
  }
}

.h5p-sdk {
  .message {
    position: relative;
    margin: $gutter 0;
    padding: 0.5em 1.250em;
    padding-right: 2.250em;
    text-align: right;

    .title {
      font-size: $text-list-title;
      color: $text-dark;
    }

    .description {
      font-size: $text-body-small;
      color: $text-light;
    }

    .message-close {
      display: none;
    }

    .message-header {
      margin: 0;
      font-size: 1.19em;
      line-height: 1.9em;
    }

    .message-body {
      font-size: 0.925em;
      margin: 0;
      color: $text-light;
      padding-bottom: 0.5em;
    }
  }

  .message.info {
    @include message-level($ac-info, $ac-info);
    box-shadow: inset 0.167em 0 $ac-info;
  }

  .message.warning {
    @include message-level($ac-warning, $text-dark);
    box-shadow: inset 0.167em 0 $ac-warning;
  }

  .message.error {
    @include message-level($ac-error, $ac-error);
    box-shadow: inset 0.167em 0 $ac-error;
  }

  .message.dismissible {
    overflow: auto;
    padding-right: 3.5em;

    .message-content {
      float: right;
    }

    .message-close {
      cursor: pointer;
      display: block;
      position: absolute;
      background-color: transparent;
      color: #555;
      right: 2em;
      line-height: 2.75;
      font-size: 0.75em;
    }

    .message-close:hover {
      color: #333;
    }
  }
}