// ============================================================================
// :: Code
// ============================================================================
/**
 * A small container representing code renderd on screen. This element makes use
 * of the prism library to render a components code.
 */

// ============================================================================
// :: Root
// ============================================================================
.bp-code {
  position: relative;
}

// ============================================================================
// :: Elements
// ============================================================================
// through this selector we can overwrite the specificty used in prism
.bp-code__container[class*="language-"],
pre.bp-code__container[class*="language-"] {

  &,
  code {
    padding: 0;
    margin: 0;

    background-color: transparent;
  }
}

.bp-code__content {

  &,
  * {
    font-size: $bp-font-size-2x-small;
  }
}