// UI Markdown View
// @description :
// @author      : Adarsh Pastakia
// @copyright   : 2016 Sigma Frameworks
// @license     : MIT

.ui-markdown {
  line-height: 1.3;
  position   : relative;

  .ui-btn-copy {
    @include position(absolute, 25px 5px auto auto);
    z-index: 5;
  }

  em {
    font-style: italic;
  }

  b {
    font-weight: 800;
  }

  strong {
    font-weight: 600;
  }

  blockquote {
    padding         : .5em 1em;
    border-left     : .25em solid $primary;
    background-color: shade($base-bg, 2%);
  }

  a {
    font-weight    : 600;
    text-decoration: underline;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  li,
  p {
    margin: .5em 0 .2em;
  }

  ul {
    margin    : 0 1em;
    list-style: {
      position: inside;
      type    : disc;
    }

    li > ul {
      list-style: circle;
      @include margin(start, 2em);

      li > ul {
        list-style: square;
      }
    }
  }

  ol {
    margin    : 0 1em;
    list-style: {
      position: inside;
      type    : decimal;
    }
  }

  li > a {
    display: inline-block;
    margin : .3em 0;
  }

  li > p {
    margin : .3em 0;
    padding: 0;
  }

  td,
  th {
    padding: .25em .5em;
  }

  th {
    font-weight  : bold;
    border-bottom: 1px solid #e5e5e5;
  }

  tr:nth-of-type(even) td {
    background-color: #f0f0f0;
  }

  hr {
    background: none;
    border    : {
      top   : 1px solid $divider-shadow;
      bottom: 1px solid $divider-hilight;
    }
    @include transform(scaleY(.5));
  }

  a > img {
    border       : 1px solid $primary;
    border-radius: .25em;
    box-shadow   : 0 0 .125em 0 rgba($primary, .7);

    &:hover {
      box-shadow: 0 0 .25em 1px rgba($primary, .8);
    }
  }

  pre {
    position: relative;
  }

  code:not(.hljs) {
    background   : #FDEAE9;
    color        : #7D2C42;
    padding      : 0 .5em;
    border-radius: .2em;
    font-family  : $base-font-family-serif;
  }

  pre > code {
    position     : static;
    display      : block;
    cursor       : text;
    padding      : 1.2em;
    border       : 1px solid rgba($base-border-color, .5);
    border-radius: $base-border-radius;
    font-family  : $base-font-family-serif;
    margin       : .5em 0;
    @include scroll();
    @include user-select(text);

    &:after {
      font-family: $base-font-family;
      font-size  : .7em;
      position   : absolute;
      top        : 0;
      right      : 0;
      padding    : .2em .7em;
      color      : #f0f0f0;
      background : #6a6a6a;
      @include border-top-right-radius($base-border-radius);
      @include border-bottom-left-radius($base-border-radius);
    }

    &.lang-html:after {
      content   : 'HTML';
      background: #01786f;
    }

    &.lang-javascript:after,
    &.lang-js:after {
      content   : 'JavaScript';
      background: #e6735c;
    }

    &.lang-ts:after,
    &.lang-typescript:after {
      content   : 'TypeScript';
      background: #1971A3;
    }

    &.lang-scss:after {
      content   : 'SCSS';
      background: #CD669A;
    }

    &.lang-json:after {
      content   : 'JSON';
      background: #9F81B9;
    }
  }
}