@import "../colors";
@import "../fonts";

.error-presenter {
  @warning-color: rgb(218, 132, 71);
  .sw-font;

  header {
    color: @white;
    cursor: pointer;
    margin: 0;

    h4 {
      display: inline-block;
      padding: 0em .5em;
      .sw-font-light;
    }

    .collapse-button {
      float: right;
      margin: 8px;
    }
  }

  &.error {
    border: 1px solid @sw-error-header;

    header {
      background: @sw-error-header;
    }
  }

  // TODO: Colors
  &.warning {
    border: 1px solid @warning-color;

    header {
      background: @warning-color;
    }
  }

  .item {
    padding: 10px 10px 10px 25px;

    h5 {
      margin-bottom: 0;
      .icon {
        margin-left: -15px;
      }

      &.error { color: darken(@sw-error-header, 20%); }
      &.warning { color: @warning-color; }
    }

    h6 {
      margin: 0;
    }
  }

  .error-description {
    margin: 0;
    font-family: monospace;
    margin: 0.2em 0;
  }

  .details {
    h5 {
      font-weight: bold;
    }
  }

  .jump-to-link {
    margin: .5em 0;
    padding-left: 25px;
    margin-left: -25px;
    display: block;
    background-image: url("../../images/jump-icon.svg");
    background-repeat: no-repeat;
    background-position: 0px -3px;
    background-size: 0 0;

    &:hover {
      background-size: auto auto;
    }
  }
}