/*
* Code Box Module
*
* Code examples with multiple sections (tabs)
*
*/


/*
* Variables
*/

$codebox-anti-pattern-color: $red-700;
$codebox-primary-color: $blue-700;
$codebox-selected: $white;


/*
* Class
*/

.code-box,
.code-example {
  background: $white;
  border: 2px solid $codebox-primary-color;
  border-radius: 4px;
  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
  margin-bottom: $unit * 3;

  &.is-anti-pattern {
    border: 2px solid $codebox-anti-pattern-color;

    header {
      background: $codebox-anti-pattern-color;
    }
  }

  header {
    background: $codebox-primary-color;
    color: $white;
    padding: $unit $unit 0 $unit;
  }

  h4 {
    color: $white;
    font-size: 13px;
    font-weight: 600;
    line-height: $unit * 3;
    margin: 0;
    outline: none;
    opacity: 1;
    padding: 0 0 $unit $unit;
    text-transform: none;
  }

  nav button {
    background: $blue-600;
    border-radius: 2px 2px 0 0;
    color: $white;
    font-size: 13px;
    height: $unit * 4;
    line-height: $unit * 4;
    margin-right: $unit;
    outline: none;
    padding: 0 ($unit * 3);
    text-transform: none;

    &.is-selected,
    &.selected {
      background: $white;
      color: $blue-grey-600;
    }
  }

  .prettyprint {
    background: $codebox-selected;
  }
}