//
// @description :
// @author      : Adarsh Pastakia
// @copyright   : 2017
// @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         : 0.5em 1em;
    border-left     : 0.25em solid $primary;
    background-color: shade($base-bg, 2%);
  }

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

  .note {
    background   : tint($secondary, 95%);
    border       : 2px solid tint($secondary, 75%);
    border-radius: $base-border-radius;
    padding      : 2em 1em;
    margin       : 1em 0;
    font-style   : italic;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  li,
  p {
    margin: 0.25em 0 1em;
  }

  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 : 0.3em 0;
  }

  li > p {
    margin : 0.3em 0;
    padding: 0;
  }

  td,
  th {
    padding: 0.25em 0.5em;
  }

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

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

  hr {
    @include transform(scaleY(.5));
  }

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

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

  pre {
    position: relative;
  }

  code {
    background   : rgba(#FDC1BE, .1);
    color        : #7D2C42;
    padding      : 0 0.5em;
    border-radius: 0.2em;
    font-family  : $base-font-family-fixed;
  }

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

    &:after {
      font-family: $base-font-family;
      font-size  : 0.7em;
      position   : absolute;
      top        : 0;
      right      : 0;
      padding    : 0.2em 0.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;
    }

    &.lang-shell:after {
      content   : 'Shell';
      background: #545454;
    }
  }
}