.docs {
  min-height: 100vh;
  
  @media #{$medium-up} {
    padding-left: 300px;
  }
}

@import 'layout/aside';

.docs__content {
  padding: 60px 0;

  @media #{$medium-up} {
    padding: 100px 0;
  }
}

.pattern {
  padding: 20px;
  background-color: #fff;
  border: 1px solid darken($color-snow, 5%);
  border-bottom: 0;
  border-radius: 3px 3px 0 0;

  + .highlighter-rouge .highlight {
    margin: 0 0 40px;
    border-radius: 0 0 3px 3px;
  }

  &--dark {
    background-color: $color-black;
    border: 1px solid $color-black;
  }

  .grid {
    margin-bottom: 20px;    
  }

  .grid__columns > .grid-block {
    min-height: 50px;
    background-color: #eee;
    text-align: center;
    padding: 18px 4px;
    font-size: 14px;
    line-height: 1.2em;
  }


  .flex-block {
    width: 100%;
    height: 220px;
    background-color: #eee;
  }
}


.cb-var {
  width: 100%;
  height: 40px;
  border: 1px dashed #ccc;
  border-top: 0;
  text-align: center;
  font-size: 15px;
  padding: 12px 0;
}

@each $colorName, $colorHex in $color-palette {
  .cb-#{$colorName} {
    background-color: $colorHex;
    @if (lightness($colorHex) > 70) {
      color: $color-black;
    }
    @else {
      color: #fff;
    }
  }
}

@each $colorName, $colorHex in $color-neutrals {
  .cb-#{$colorName} {
    background-color: $colorHex;
    @if (lightness($colorHex) > 60) {
      color: $color-black;
      border: 1px solid $color-snow;
    }
    @else {
      color: #fff;
    }
  }
}

.post-header {
  border-bottom: 2px solid $color-smoke;
  padding-bottom: 20px;
  margin-bottom: 20px;

  p {
    margin-bottom: 10px;
    width: 100%;
    
    @media #{$large-up} {
      max-width: 45%;
    }
  }
}


.color-block {
  width: 100%;
  height: 180px;
  padding: 26px 20px;

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  ul li {
    @extend %font-family-secondary;
    display: block;
    font-size: rem-calc(14px);

    &:first-of-type {
      margin-bottom: 20px;
      font-size: rem-calc(18px);
      font-weight: 400;
    }
  }
}

.space-breaker {
  width: 100%;
  height: 30px;
}