.article {
  .articles & {
    @include mq($from: desktop) {
      position: relative;

      &:after {
        bottom: rem(-10px);
        content: '';
        left: rem(-10px);
        position: absolute;
        right: rem(-10px);
        top: rem(-10px);
        z-index: -1;
      }

      &:nth-child(even):after {
        background-image: radial-gradient(circle at center, transparentize($color-alpha, 0.95) 60%, transparent);
      }

      &:nth-child(odd):after {
        background-image: radial-gradient(circle at center, transparentize($color-gamma, 0.95) 60%, transparent);
      }
    }
  }

  & + & {
    @include mq($from: desktop) {
      .articles &:after {
        top: rem(70px);
      }
    }

    &:before {
      color: $color-alpha;
      content: '...';
      display: block;
      margin: rem(50px) 0;
      text-align: center;
    }
  }

  img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }
}

.article__title {
  @include tsh($color-beta);
  color: lighten($color-alpha, 10%);
}

.article__thumb {
  display: block;
  margin-top: rem(10px);
  position: relative;

  &:after {
    border: 1px solid lighten($color-alpha, 30%);
    bottom: 0;
    content: '';
    left: 0;
    margin: rem(7px);
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
  }
}

.content {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @include tsh($color-beta);
  }

  p {
    @include tsh($color-beta);
  }

  code {
    color: $color-alpha;
    padding: 0 rem(5px);
  }

  li a,
  p a {
    @include tra;
    color: $color-alpha;
    word-break: break-word;

    &:hover,
    &:focus {
      color: $color-alpha;
    }
  }

  blockquote {
    background-color: transparentize($color-gamma, 0.95);
    color: lighten($color-gamma, 25%);
    font-size: ms(2);
    margin: 0;
    overflow: hidden;
    padding: rem(10px) rem(50px);
    position: relative;

    &.right {
      text-align: right;
    }

    &:before,
    &:after {
      color: lighten($color-gamma, 82%);
      content: '”';
      font-family: $font-beta;
      font-size: ms(40);
      position: absolute;
      transform: rotate(20deg);
      transform-origin: center;
      z-index: -1;
    }

    &:before {
      content: '”';
      left: rem(-40px);
      top: rem(-125px);
    }

    &:after {
      bottom: rem(-205px);
      content: '“';
      right: rem(-10px);
    }

    footer {
      color: $color-gamma;
      display: flex;
      flex-direction: column;
      font-size: ms(-1);
      font-style: italic;
      padding: ms(1) 0;
    }

    a {
      color: inherit;
      text-decoration: none;
    }
  }

  strong {
    font-weight: normal;
    text-decoration: underline;
  }

  @for $i from 1 through 6 {
    $amount: 22 - $i * 2%;

    h#{$i} {
      color: lighten($color-alpha, $amount);
    }
  }
}

.highlight {
  @include zero-box();
  background-image: bg-v(darken($color-gamma, 25%));
  color: $color-beta;
  font-size: ms(-2);
  overflow-x: auto;
  padding: rem(10px);
  position: relative;

  figcaption {
    color: lighten($color-alpha, 33%);
    display: flex;
    flex-direction: column;
    padding: 0 rem(7px);
  }

  .line {
    margin-left: rem(5px);
    margin-right: rem(5px);
  }

  .marked {
    background-color: transparentize($color-beta, 0.75);
  }

  pre {
    @include zero-box();
  }

  a {
    color: inherit;
  }
}

.video-container {
  padding-bottom: calc(9 / 16 * 100%);
  position: relative;

  iframe {
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
  }
}

// .archive__title {
//   font-size: ms(4);
//   color: $color-alpha;
// }

// .article__item--list {
//   &:not(:last-of-type) {
//     margin-bottom: 36px;
//   }
// }

// .article__content,
// .article__footer {
//   margin-top: 24px;
// }

// .article__title {
//   font-size: ms(4);
//   color: $color2;
//   transition: color .15s ease-in-out;

//   &:hover,
//   &:focus,
//   &:active {
//     color: $color-alpha;
//   }
// }

// .article__title--list {
//   margin-bottom: 18px;
// }

// .article__title--post {
//   margin-bottom: 24px;
// }

// .article__title-link {
//   color: inherit;
// }

// .article__details {
//   align-items: baseline;
//   justify-content: space-between;
//   display: flex;
//   flex-wrap: wrap;
// }

// .article__meta {
//   font-size: ms(-2);
//   margin-right: 6px;

//   @include mq($until: mobile) {
//     margin-bottom: 6px;
//   }
// }

// .article__meta-item {
//   display: inline-block;
//   background-image: radial-gradient(
//     circle at top left,
//     transparentize($color-alpha, .1),
//     transparentize($color2, .1)
//   );
//   padding: 1px;
//   border-radius: 3px;
// }

// .article__meta-inner {
//   display: block;
//   padding: 2px 4px;
//   border-radius: 2px;
//   background-color: $color-beta;
//   color: $color-alpha;
// }

// .article__link {
//   font-size: ms(-1);
//   background-image: radial-gradient(
//     circle at center left,
//     transparentize($color-alpha, .33),
//     transparentize($color2, .33)
//   );
//   color: $color-beta;
//   padding: 3px 6px;
//   border-radius: 3px;
//   transition: background-color .15s ease-in-out;

//   &::after {
//     content: "⇢";
//     margin-left: 3px;
//   }

//   &:hover,
//   &:focus,
//   &:active {
//     color: $color-beta;
//     background-color: $color-alpha;
//   }
// }

// .article__header--post,
// .article__title--post:not(:last-child) {
// }

// .article__content--post:not(:last-child),
// .article__item--post {
// }

// .article__footer--post {
//   display: flex;
//   flex-wrap: wrap;
//   justify-content: space-between;
//   align-items: center;
// }