@import 'variables';
@import 'mixins';
@import 'config/import';

.blank-space {
  height: 10px;
}

:root {
  scroll-padding-top: var(--header-height);
}

body.default-header {
  .crayons-article .crayons-article__body [id] {
    scroll-margin-top: var(--header-height);
  }
}

article {
  padding: 0 0;
  position: relative;

  .image {
    position: relative;
    width: 100%;
    margin: auto;
    max-width: 1024px;
    z-index: 2;
    height: 42vw;

    @media screen and (min-width: 880px) {
      height: 370px;
    }

    @media screen and (min-width: 950px) {
      border-top-left-radius: 2px;
      border-top-right-radius: 2px;
    }
  }
}

.container {
  width: 880px;
  max-width: 100%;
  margin: 0 auto 20px;
  text-align: left;
  @include dev-card;

  @media screen and (min-width: 950px) {
    border-radius: 3px;
    margin-top: 24px;
  }

  &.article {
    position: relative;
  }

  .title {
    z-index: 6;
    position: relative;
    width: 81%;
    font-family: var(--ff-sans-serif);

    @media screen and (max-width: 750px) {
      width: 90%;
    }

    @media screen and (max-width: 430px) {
      width: 93%;
    }

    max-width: 710px;
    margin: auto;

    h1 {
      margin: 0 auto;
      padding: 14px 0 7px;
      font-weight: 700;
      min-height: 40px;
      font-size: calc(2vw + 26px);
      word-break: break-word;
      line-height: 1.28em;
      @media screen and (min-width: 1600px) {
        font-size: 57px;
      }

      .title-block {
        display: inline-block;
      }

      &.medium {
        font-size: calc(1.82vw + 25px);
        @media screen and (min-width: 1600px) {
          font-size: 47px;
        }
      }

      &.long {
        font-size: calc(1.48vw + 23px);

        @media screen and (min-width: 1600px) {
          font-size: 46px;
        }
      }

      &.longer {
        font-size: calc(1.44vw + 22px);

        @media screen and (min-width: 1600px) {
          font-size: 45px;
        }
      }

      &.longest {
        font-size: calc(1.42vw + 22px);

        @media screen and (min-width: 1600px) {
          font-size: 42px;
        }
      }
    }

    h3 {
      margin: 2px auto;
      padding: 0;
      padding: 0 3px 16px;
      font-weight: 500;
      color: var(--card-color-tertiary);
      font-size: 13.5px;
      line-height: 1.8em;

      @media screen and (min-width: 430px) {
        font-size: 15px;
      }

      .profile-pic {
        width: 28px;
        height: 28px;
        border-radius: 50px;
        display: inline-block;
        vertical-align: -9px;
        margin-right: 2px;
        background: $light-gray;
      }

      a {
        color: var(--card-color-tertiary);
        text-decoration: none;
      }

      .icon-img,
      .reader-image-tiny {
        opacity: 0.5;
        width: 18px;
        height: 18px;
        vertical-align: -4px;
        margin: 0 1px;

        &:hover {
          opacity: 0.6;
        }
      }

      .published-at {
        margin-right: 0;
        display: inline-block;
      }

      .posted-date-inline {
        display: inline-block;
      }

      .action-space {
        padding: 0 0 0 0;
        display: inline-flex;
        min-width: 44px;
        a {
          display: inline-block;
          background: $green;
          color: $black;
          padding: 2px 12px 3px;
          border-radius: 3px;
          line-height: 1.1em;
          font-family: $helvetica-condensed;
          font-stretch: condensed;
          margin-right: 4px;
          @media screen and (max-width: 376px) {
            padding: 2px 6px 3px;
            margin-left: 3px;
            margin-left: 5px;

            .post-word {
              display: none;
            }
          }
        }
      }
    }

    .tags {
      .tag {
        display: inline-block;
        border-radius: 3px;
        font-size: 13px;
        font-weight: bold;
        padding: 2px 5px 3px;
        border-radius: 2px;
        background: #d6d9e0;
        color: #606570;

        &:hover {
          opacity: 0.9;
        }
      }
    }
  }

  .body {
    margin: auto;
    width: 82%;
    font-family: Palatino, 'Palatino Linotype', 'Palatino LT STD',
      'Book Antiqua', Georgia, serif;
    font-size: 21px;
    line-height: 32px;
    background: var(--card-bg);
    position: relative;
    padding: 5px 0px;
    overflow-wrap: break-word;

    a {
      code {
        color: $sky-blue;
      }

      &.anchor {
        padding-top: 0;
        margin-top: 0;
        top: -50px;
        display: block;
        visibility: hidden;
        position: relative;
      }
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-family: var(--ff-sans-serif);
      margin: 0.3em auto;
      padding-left: 4px;
      padding-right: 4px;
    }

    h1 {
      font-size: 1.85em;
      line-height: 1.14em;
      font-weight: 400;
    }

    h2 {
      font-size: 1.7em;
      font-weight: 400;
      line-height: 1.14em;
      padding-bottom: 0;
      margin-bottom: 0.5em;
    }

    h3 {
      font-size: 1.32em;
      font-weight: 400;
    }

    hr {
      width: calc(25% + 12px);
      opacity: 0.1;
      border-width: 1px;
      border-style: solid;
      border-color: var(--body-color);
      margin: 1.3em auto 1.5em;
    }

    p {
      margin: 0.95em 0 1.2em;
      padding: 0.2em;
    }

    ul,
    ol {
      padding-left: 6px;
      margin: 0.8em 0.7em 0.8em 1.9em;
    }

    ol {
      br {
        line-height: 0;
        margin: 0;
        padding: 0;
      }
    }

    ul {
      list-style-type: square;

      br {
        line-height: 0;
        margin: 0;
        padding: 0;
      }

      p {
        margin: 0;
        padding: 0;
      }

      ul {
        margin: 0 0.7em 0 1.9em;
        list-style-type: circle;
      }
    }

    li {
      margin: 0.3em auto;
    }

    figure {
      margin: 0;
    }

    figcaption {
      font-style: italic;
      text-align: center;
      font-size: 0.8em;
      line-height: 1.4em;
      color: var(--body-color);
      display: block;
    }

    p + figcaption {
      margin-top: -0.8em;
    }

    @media screen and (max-width: 750px) {
      width: 92%;
    }

    @media screen and (max-width: 430px) {
      font-size: 17.5px;
      line-height: 26px;
      width: 94%;
      margin-left: 3%;

      ul,
      ol {
        margin: 0.8em 0.7em 0.8em 1.4em;
      }

      h1 {
        font-size: 1.6em;
      }

      h2 {
        font-size: 1.4em;
      }

      h3 {
        font-size: 1.16em;
      }
    }

    blockquote {
      border-left: calc(0.2vw + 2px) solid $dark-gray;
      padding: 0.1% 6% 0.1% 4%;
      margin: 1.6em 1vw;
      font-size: 0.92em;
      line-height: 1.4em;

      p {
        padding: 0;
        margin: 0.95em 0 0.95em;
      }
    }

    code {
      margin: auto;
      background: rgba(0, 0, 0, 0.1);
      padding: 0.1em 0.3em 0;
      border-radius: 2px;
      font-size: 0.84em;
      vertical-align: 0;
      max-width: 100%;
      line-height: 1.6em;
    }

    kbd {
      display: inline-block;
      padding: 3px 5px;
      font-size: 11px;
      line-height: 10px;
      color: #444d56;
      vertical-align: middle;
      background-color: #fafbfc;
      border: solid 1px #c6cbd1;
      border-bottom-color: #959da5;
      border-radius: 3px;
      box-shadow: inset 0 -1px 0 #959da5;
    }

    pre {
      background: #29292e;
      border-radius: 2px;
      overflow-x: auto;
      color: #eff0f9;
      line-height: 1.42em;
      padding-left: 4%;
      padding-right: 7%;
      font-size: 0.7em;
      width: 97%;
      margin-left: -3%;
      padding-top: 6%;
      padding-bottom: 6%;
      border-radius: 0;
      overflow-wrap: normal;

      @media screen and (min-width: 430px) {
        width: 111%;
        margin-left: -11%;
        padding-left: 9%;
        padding-right: 2%;
      }

      code {
        background: #29292e;
        color: #eff0f9;
        white-space: pre;
      }
    }

    img {
      height: auto;
      position: relative;
      display: block;
      margin: auto;
      left: -4%;
      max-width: 108%;
      max-height: calc(50vh + 180px);

      @media screen and (min-width: 430px) {
        left: -6px;
        max-width: calc(100% + 12px);
      }
    }

    a.article-body-image-wrapper {
      cursor: zoom-in;
    }

    iframe {
      width: 100%;
      border: 0;
      margin: 1.2em 0;
      border-radius: var(--radius);
    }

    .fluidvids {
      margin: 1em 0;

      iframe {
        margin: 0;
      }
    }

    .table-wrapper-paragraph {
      width: 100%;
      margin-left: 0%;
      overflow-x: auto;

      @media screen and (min-width: 430px) {
        width: 108%;
        margin-left: -4%;
      }

      @media screen and (min-width: 800px) {
        width: 110%;
        margin-left: -5%;
      }
    }

    table {
      font-family: var(--ff-sans-serif);
      border-collapse: collapse;
      font-size: 0.78em;
      margin: 0.8em auto 1.2em;
      table-layout: fixed;

      @media screen and (min-width: 500px) {
        font-size: 0.9em;
      }

      th {
        border: 1px solid $light-medium-gray;
        padding: 5px 1vw;
        background: var(--body-bg);
        text-align: left;
      }

      td {
        border: 1px solid $light-medium-gray;
        padding: 5px 1vw;
        box-sizing: border-box;
      }
    }

    .twitter-tweet {
      margin: auto;
    }
  }

  .html-variant-wrapper {
    width: 88%;
    margin: 0 auto 25px;
    display: none;

    @media screen and (min-width: 500px) {
      width: 82%;
    }
  }
}

// This classname is added by the freezeframe library we use to play/pause animated images
.ff-container {
  --gif-bg: rgb(var(--black));
  --gif-color: rgb(var(--white));
  // freezeframe uses a z-index of 1 to control when the static image is visible.
  // To avoid clashes with our wider system of z-index values, we define a custom one for this use-case only
  --gif-btn-z-index: 2;

  width: fit-content;
  width: -moz-fit-content;

  // Align styles of freezeframed animated images with normal image styles
  canvas {
    border-radius: var(--radius);
    object-fit: contain;
    max-width: 100%;
    min-width: 100%;
    max-height: calc(50vh + 180px);
  }

  img[data-animated='true'] {
    margin: 0;
    cursor: pointer;
  }

  .gif-button {
    --bg: var(--gif-bg);
    --bg-hover: var(--gif-bg);
    --color: var(--gif-color);
    --color-hover: var(--gif-color);

    position: absolute;
    bottom: 0;
    right: 0;
    margin: var(--su-1);
    z-index: var(--gif-btn-z-index);
    display: flex;
    align-items: center;
    padding: var(--su-1) var(--su-2);
    font-weight: var(--fw-bold);

    &:hover:enabled,
    .js-focus-visible &.focus-visible:focus,
    &[aria-pressed='true'] {
      --bg: var(--gif-bg);
      --bg-hover: var(--gif-bg);
      --color: var(--gif-color);
      --color-hover: var(--gif-color);
      z-index: var(--gif-btn-z-index);
    }
  }

  .gif-button[aria-pressed='false'] {
    .gif-pause {
      display: inline-block;
    }

    .gif-play {
      display: none;
    }
  }

  .gif-button[aria-pressed='true'] {
    .gif-pause {
      display: none;
    }

    .gif-play {
      display: inline-block;
    }
  }
}

// When a user has wrapped their gif in a <center> we don't want to manipulate the position
center .ff-container {
  left: unset;
  transform: none;
}


body.user-role--admin, .user-role--super_admin, .current-user-is-article-author {
  .crayons-article__actions {
    display: block !important;
    min-height: 42px !important;
  }
}