@import '../../../../src/styles/common/colors';
@import '../../../../src/styles/common/mixins';
@import '../../../../src/styles/common/screen';

// TODO: replace all font sizes with variables
.code-example-wrap {
  background-color: #fff;
  box-sizing: border-box;
  box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);
  margin: 0 0 20px;
  padding: 15px;

  header {
    align-items: center;
    display: flex;
    height: 33px;
    position: relative;
    justify-content: space-between;

    h3 {
      display: flex;
      padding-right: 2em;
      margin: 0;
    }

    // Local Overrides
    button {
      margin: 0;
      padding: 8px 7px 10px 5px;
      position: absolute;
      top: 0;
      right: 0;
      transform-origin: center;
      
      .button-icon-wrap {
        align-items: center;
        display: flex;
        position: relative;
        top: 1px;
        right: -1px;
        transition: transform .25s ease-out;
        transform-origin: center;
        transform: rotate(180deg);

        svg:first-child {
          margin-right: -5px;
        }
      }
    }

    button.active {
      .button-icon-wrap {
        transform: rotate(90deg);
      }
    }
  }

  .component {
    @include clearfix;
    padding: 20px 0 0;

    code {
      display: block;
      margin-top: 1em;
      word-break: break-word;
    }

    > a {
      color: $primary-1;
      text-decoration: none;
    }
  }

  .body {
    height: 0;
    max-height: 0;
    overflow: hidden;
    padding: 0;

    &.open {
      height: auto;
      padding: 20px 0;
      max-height: 1000px;
      overflow: auto;
      transition: max-height 800ms ease-out;
    }

    > p {
      margin: 0;
    }

    pre, code {
      margin: 0;
      padding: 0;
    }

    pre {
      background: linear-gradient(
        to bottom,
        $neutral-2 50%,
        $neutral-2,
        $white,
        $white 50%
      );
      background-size: 100% 44px;
      padding: 1px 6px;
    }

    code {
      @include monospace;
      margin-bottom: -2px;
      white-space: pre-wrap;
    }
  }

  .description {
    margin-top: 20px;

    > a {
      color: $primary-1;
    }

    > p {
      color: $base-text;
      font-size: 14px;
      margin: 0;
    }

    code {
      @include monospace;
      background-color: rgba(0,0,0,.04);
      border-radius: 3px;
      margin: 0;
      padding: .2em;
    }
  }
}

// Styles for Highlight.js
// http://highlightjs.readthedocs.org/en/latest/css-classes-reference.html
:global {
  .hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5em;

    .hljs-string,
    .hljs-section,
    .hljs-function,
    .hljs-selector-class,
    .hljs-template-variable,
    .hljs-deletion {
      color: $red;
    }
    .hljs-string {
      white-space: normal;
    }
    .hljs-keyword {
      color: $black;
      font-weight: bold;
    }
    .hljs-subst {
      color: $black;
    }
  }
}