@import "skin_variables.lsi";

/* minimag formatting styles */

/* Headings */

/* paragraph style */

img {
  image-rendering: pixelated;
}

.post-text {
  h1, h2, h3, h4, h5, h6 {margin: 0.75em 0;}

  h1 { font-size: 1.5em;}
  h2 { font-size: 1.4em;}
  h3 { font-size: 1.3em;}
  h4 { font-size: 1.2em;}
  h5 { font-size: 1.1em;}
  h6 { font-size: 1em;}

  span.underlined {text-decoration: underline;}

  a {
    position: relative;
    color: @clRed;
    &:not(:hover) {
      text-decoration: none;
    }
    &:hover:after {
      content: attr(href);

      position: absolute;
      left: 0px;
      bottom: 1.5em;
      width: max(100%, 150px);

      font-size: 12px;
      background-color: @clYellow;
      color: @clBlack;
      padding: 2px;

      display: inline;

      word-break: break-all;
      word-wrap: anywhere;
    }
  }

  p {
    text-align: justify;
    margin-top: 0.75em;
    margin-bottom: 0.75em;
    word-wrap: anywhere;
    white-space: normal;
    hyphens: auto;
  }

  ol, ul { padding-left: 4ch;}

  li {
    margin: 0.5em 0 0.5em 0;
    list-style-position: outside;
  }

  /* source code */

  pre {
    margin: 1em 0;
    overflow: auto;

    font-family: @FontMonospace;
    font-size: 0.93em;

    background-color: @clLightGray;
    color: black;

    border-left: 0.5ch solid @clRed;
    clear: both;

    > code {
      white-space: inherit;
      display: block;
      font: inherit;
      padding: 0.5em;
      overflow: auto;
      scrollbar-width: thin;
    }
  }

  code {
    display: inline;
    font-family: @FontMonospace;
    font-size: 0.93em;
    font-weight: bold;
    white-space: pre;
  }

  /* Style of the text included image. */

  img.inline {
    display: inline;
    vertical-align: middle;
    overflow: hidden;
  }

  figure {
    margin: 1em auto;
    display: block;
    text-align: center;

    > img {
      border-style: none;
      border-width: 0;
      max-width: 100%;
      max-height: 30vh;
    }
  }


/* article tables */

  table {
    border: 1px solid @clGray;
    margin: 1em auto;
    background-color: @clWhite;
    border-collapse: collapse;
    clear: both;

    td, th {
      font-size: 1em;
      border: 1px solid @clGray;
      padding: 0.5em 1ch;
      margin: 0;
    }

    th {
      border: 2px solid @clGray;
      p {
        text-align: center;
        font-weight: bold;
      }
    }
  }

/* block quotes */

  blockquote {
//    max-height: 15em;
//    overflow: hidden;
    margin: 1em 0 1em 1em;
    padding: 0;

    > fieldset {
      padding: revert;
      > legend {
        padding: revert;
        border: 1px solid @clGray;
        box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);

        q {
          color: @clRed;
          min-width: 2ch;
          text-align: center;
          display: inline-block;
          text-decoration: none;
          border-bottom: 2px dotted @clRed;
        }
      }
    }
  }

  video, iframe {
    display: block;
    margin: @margin auto;
    max-width: 95%;
  }

  summary {
    cursor: pointer;
  }

  .emoji {
    font-size: 1.3em;
    font-family: @FontEmoji;
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    & > * {
      flex-shrink: 0;
      flex-grow: 0;
    }
    &>span:hover {
      transform: scale(2);
      z-index: 1000;
    }
  }
}

