@import "../../variables.less";

@{prefix}toast {
  top: @top-bar-height;
  position: fixed;
  color: @top-bar-bg-active;
  font-size: @text-small;
  z-index: @z-index-toast;
  .align-items(center);
  .border-box();
  .display-flex();
  padding: 7.5px 15px;
  right: 0;
  left: 0;

  &@{prefix}toast-success {
    background-color: rgba(209, 255, 164, 0.95);
  }

  &@{prefix}toast-warning {
    background-color: rgba(255, 230, 159, 0.95);
  }

  &@{prefix}toast-error {
    background-color: rgba(255, 161, 161, 0.95);
    z-index: @z-index-toast-action-needed;
  }

  // Dismiss button
  @{prefix}toast-dismiss {
    background: transparent;
    border: 0;

    &:focus {
      outline: 2px solid;
    }
  }

  @{prefix}toast-message {
    margin: 0 auto;

    &:before {
      font-family: 'FontAwesome';
      content: "\f0da";
      margin: 0 2px;
      display: inline-block;
      color: transparent;
      margin-right: @space-smallest;
    }

    .fa { // space between toast's icon and toast's messsage
      margin-right: 3px;
    }

    @{prefix}link {
      color: @top-bar-bg-active;
      font-size: @text-small;
      font-weight: @weight-light;
      text-decoration: underline;

      &:focus {
        .focusRingInherit();
      }
    }
  }

  &:focus {
    outline: 0;
    @{prefix}toast-message {
      &:before {
        color: @top-bar-bg-active;
      }
    }
  }
}
