/* Info blocks
---------------------------------------------------------------------------------- */

// !important next to rules are intended solution till we will use shadow DOM or iframes for source_examples

.source_data,
.source_doc,
.source_note,
.source_warn,
.source_info {
  display: block;
  position: relative;
  box-sizing: content-box !important;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  line-height: 1.5;

  @include media(medium-up) {
  // Legacy
  margin-right: 2px !important;

  // New spec page modifier
  .source_page.__spec & { margin-right: 0 !important;}
}

  .source_section & {
    margin-right: 0 !important;
  }

  &:empty {
    display: none;
  }

  p {
    margin: 0 0 10px !important;

    &:last-child {
      margin-bottom: 0 !important;
    }
  }

  th, td {
    border-color: #868686 !important;
  }

  > *:last-child {
    margin-bottom: 0 !important;
  }
}

.source_info {
  font-style: italic;
}

.source_warn {
  padding: 10px 10px 10px 35px !important;

  background: url(/source/assets/i/warn.png) no-repeat 13px 14px !important;
  border: 1px solid $red-light;

  .source_section & {
    margin-right: 0 !important;
  }
}

.source_note {
  padding: 10px 10px 10px 35px !important;

  background: url(/source/assets/i/note.png) no-repeat 13px 14px !important;
  border: 1px solid $blue-light;
}

.source_doc {
  padding: 10px 25px !important;

  background: #DCFCDA !important;
  font-family: $code-font-family;

  & code,
  & p {
    font-family: $code-font-family;
  }
}

.source_data {
  padding: 10px 25px !important;

  border: 1px dotted #ccc !important;
  background: #f9f9f9 !important;
  font-size: .75em !important;
}

/* /Info blocks
---------------------------------------------------------------------------------- */