.v1-content,
.medium-editor-element {
  * {
    &::selection {
      background-color: rgba(0, 134, 204, 0.2);
    }
  }

  a {
    color: #0086cc;
  }

  h2 {
    color: #333;
    font-size: 24px;
    letter-spacing: 0.03em;
    line-height: 1.6;
    margin: 24px 0;
    word-break: break-word;
  }

  h3 {
    color: #333;
    font-size: 20px;
    letter-spacing: 0.03em;
    line-height: 1.8;
    margin: 16px 0;
    word-break: break-word;
  }

  p {
    color: #333;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.8;
    margin: 16px 0;
    word-break: break-word;
  }

  blockquote {
    background: #f6f6f6;
    color: #333;
    font-size: 16px;
    letter-spacing: 0.03em;
    line-height: 1.8;
    margin: 24px 0;
    padding: 20px;
    word-break: break-word;
  }

  .medium-insert-images {
    figure {
      figcaption {
        color: #666;
        display: block;
        font-size: 12px;
        font-style: normal;
        font-weight: normal;
        letter-spacing: 0.03em;
        line-height: 1.5;
        margin: 8px 0;
        outline: 0 solid transparent;
        text-align: center;
        word-break: break-all;
      }
    }
  }

  img {
    max-width: 100%;
  }

  hr {
    border: none;
    border-top: dotted 3px #e3e3e3;
    height: 2px;
  }

  ol,
  ul {
    li {
      line-height: 1.4;
      margin-bottom: 0.5em;
    }
  }

  [data-alis-iframely-url] {
    user-select: none;
    margin: 24px 0;
  }

  .twitter-profile-card {
    border-radius: 4px;
    border: 1px solid #e2e8ed;
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    padding: 20px;
    text-decoration: none;
    width: 100%;

    .title {
      color: #030303;
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0.8px;
      margin-bottom: 8px;
    }

    .description {
      color: #6e6e6e;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.7px;
      line-height: 1.5;
      margin-bottom: 8px;
    }

    .site {
      color: #6e6e6e;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.6px;
    }
  }

  .medium-insert-images {
    margin: 24px 0;
  }

  .iframely-embed-card {
    border-radius: 4px;
    border: 1px solid #e3e3e3;
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 140px;
    padding: 20px;
    position: relative;
    text-decoration: none;
    width: 100%;

    .title {
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      color: #030303;
      display: -webkit-box;
      font-size: 16px;
      font-weight: 500;
      height: 22px;
      letter-spacing: 0.8px;
      line-height: 1.5;
      margin: 0 120px 10px 0;
      overflow: hidden;
      text-align: left;
      text-overflow: ellipsis;
      word-break: break-word;

      &.without-space {
        margin: 0 0 10px 0;
      }
    }

    .description {
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      color: #6e6e6e;
      display: -webkit-box;
      font-size: 14px;
      font-weight: 500;
      height: 42px;
      letter-spacing: 0.7px;
      line-height: 1.6;
      margin: 0 120px 10px 0;
      overflow: hidden;
      text-align: left;
      text-overflow: ellipsis;
      word-break: break-word;

      &.without-space {
        margin: 0 0 10px 0;
      }
    }

    .thumbnail {
      height: 100px;
      object-fit: cover;
      position: absolute;
      right: 20px;
      top: 20px;
      width: 100px;
    }

    .site {
      color: #6e6e6e;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.6px;
    }
  }
}

.medium-editor-insert-plugin .medium-insert-buttons button {
  box-shadow: 0 0 10px 0 rgba(146, 146, 146, 0.5);
  border: none;
}

.medium-toolbar-arrow-under:after {
  border-color: #fff transparent transparent transparent;
  border-width: 16px 8px 0 !important;
  filter: drop-shadow(0 3px 5px rgba(192, 192, 192, 0.5));
  top: 50px;
  z-index: -1;
}

.medium-toolbar-arrow-over:before {
  border-color: transparent transparent #fff transparent;
  top: -8px;
}

.medium-editor-toolbar {
  background-color: #242424;
  background: linear-gradient(to bottom, #fff, rgba(36, 36, 36, 0.75));
  border-radius: 5px;
  filter: drop-shadow(0 3px 5px rgba(192, 192, 192, 0.5));
}

.medium-editor-toolbar li button {
  background-color: #fff;
  border: 0;
  color: #000;
  height: 50px;
  min-width: 40px;
  transition: background-color 0.2s ease-in;
}

.medium-editor-toolbar li button:hover {
  color: #333;
}

.custom-class-h2 {
  background: url('~assets/images/pc/editor/icon_index.png') no-repeat;
  background-size: 32px;
  background-position: 6px 10px;

  &.medium-editor-button-active {
    background: url('~assets/images/pc/editor/icon_index_selected.png') no-repeat;
    background-size: 32px;
    background-position: 6px 10px;
  }
}

.custom-class-h3 {
  background: url('~assets/images/pc/editor/icon_text.png') no-repeat;
  background-size: 32px;
  background-position: 3px 10px;

  &.medium-editor-button-active {
    background: url('~assets/images/pc/editor/icon_text_selected.png') no-repeat;
    background-size: 32px;
    background-position: 3px 10px;
  }
}

.custom-class-quote {
  background: url('~assets/images/pc/editor/icon_quote.png') no-repeat;
  background-size: 32px;
  background-position: 2px 10px;

  &.medium-editor-button-active {
    background: url('~assets/images/pc/editor/icon_quote_selected.png') no-repeat;
    background-size: 32px;
    background-position: 2px 10px;
  }
}

.custom-class-bold {
  background: url('~assets/images/pc/editor/icon_bold.png') no-repeat;
  background-size: 32px;
  background-position: 4px 10px;

  &.medium-editor-button-active {
    background: url('~assets/images/pc/editor/icon_bold_selected.png') no-repeat;
    background-size: 32px;
    background-position: 4px 10px;
  }
}

.custom-class-italic {
  background: url('~assets/images/pc/editor/icon_italic.png') no-repeat;
  background-size: 32px;
  background-position: 4px 10px;

  &.medium-editor-button-active {
    background: url('~assets/images/pc/editor/icon_italic_selected.png') no-repeat;
    background-size: 32px;
    background-position: 4px 10px;
  }
}

.medium-editor-action-anchor {
  background: url('~assets/images/pc/editor/icon_textlink.png') no-repeat;
  background-size: 32px;
  background-position: 2px 10px;

  &.medium-editor-button-active {
    background: url('~assets/images/pc/editor/icon_textlink_selected.png') no-repeat;
    background-size: 32px;
    background-position: 2px 10px;
  }

  b {
    display: none;
  }
}

.medium-editor-toolbar li .medium-editor-button-first {
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
}

.medium-editor-toolbar li .medium-editor-button-last {
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
}

.medium-editor-toolbar li .medium-editor-button-active {
  background-color: #0086cc;
}

.medium-editor-toolbar-form {
  background: #fff;
  border-radius: 5px;
  color: #000;
}

.medium-editor-toolbar-form .medium-editor-toolbar-input {
  background: #fff;
  border-radius: 5px;
  box-sizing: border-box;
  color: #000;
  height: 50px;
}
.medium-editor-toolbar-form a {
  color: #000;
}

.medium-editor-toolbar-anchor-preview {
  background: #242424;
  border-radius: 5px;
  color: #fff;
}

.medium-editor-placeholder:after {
  color: #b3b3b1;
}

.medium-insert-image-active {
  outline: none;
  border: 2px solid #000;
  box-sizing: border-box;
}

@media screen and (max-width: 640px) {
  .v1-content,
  .medium-editor-element {
    h2 {
      font-size: 24px;
      letter-spacing: 0;
      line-height: 1.6;
      margin: 24px 0;
    }

    h3 {
      font-size: 20px;
      letter-spacing: 0;
      line-height: 1.7;
      margin: 12px 0;
    }

    p {
      font-size: 16px;
      letter-spacing: 0;
      line-height: 1.8;
      margin: 12px 0;
    }

    blockquote {
      font-size: 16px;
      letter-spacing: 0;
      line-height: 1.8;
      margin: 20px 0;
    }

    figure {
      figcaption {
        letter-spacing: 0;
      }
    }

    ol,
    ul {
      li {
        font-size: 14px;
      }
    }

    .twitter-tweet {
      width: 90vw !important;
    }

    .twitter-profile-card {
      .title {
        font-size: 14px;
      }

      .description {
        font-size: 12px;
      }
    }

    .iframely-embed-card {
      .title {
        font-size: 14px;
        margin: 0 0 12px 0;
      }

      .description {
        font-size: 12px;
        height: 40px;
        margin: 0 80px 12px 0;

        &.without-space {
          margin: 0 0 12px 0;
        }
      }

      .site {
        font-size: 12px;
      }

      .thumbnail {
        height: 60px;
        top: 50px;
        width: 60px;
      }
    }
  }

  .iframely-embed {
    -webkit-overflow-scrolling: touch;
    overflow-x: scroll;
  }
}
