@import url('./atom-one-dark.min.css');
// https://cdnjs.com/libraries/highlight.js
.editorjs-code-block {
  margin: 10px 0 10px 0;
  box-sizing: border-box;

  * {
    box-sizing: border-box;
  }

  width: 100%;
  position: relative;

  .control-container {
    padding: 5px;
    padding-bottom: 0;
    display: flex;
    justify-content: space-between;
    background-color: #282c34;
    // border-radius: 5px 5px 0 0;

    .editorjs-code-language-select {
      position: relative;

      & * {
        font-size: 12px;
        font-family: Arial, Helvetica, sans-serif;
      }

      select {
        display: none;
      }

      .select-selected {
        background-color: rgba(255,255,255,0.2);
        padding: 5px 20px 5px 5px;
        transition: background-color 0.1s;
        width: fit-content;
        border-radius: 2px;
        cursor: pointer;
        position: relative;
        color: #f0f0f0;

        &:hover {
          background-color: rgba(255,255,255,0.4);
        }

        .arrow-icon {
          position: absolute;
          width: 10px;
          height: 10px;
          color: #fff!important;
          right: 5px;
          top: 6px;
          transition: transform 0.2s;
        }

        &.select-arrow-active {
          .arrow-icon {
            color: #fff;
            transform: rotateZ(180deg);
          }
        }
      }

      .select-items {
        padding: 5px;
        height: auto;
        background-color: #fff;
        width: fit-content;
        border-radius: 5px;
        margin-top: 5px;
        position: absolute;
        z-index: 2;

        .search-input {
          margin: 5px;
          padding: 5px;
          background-color: lighten($color: #bbb, $amount: 20%);
          border: 0;
          outline: 0;
          border-radius: 2px;
          color: #292929;
        }

        .items-list {
          max-height: 300px;
          overflow-y: auto;

          div {
            color: rgb(85, 85, 85);
            cursor: pointer;
            padding: 5px 10px 5px 10px;
            margin: 5px 5px 5px 0;
            border-radius: 2px;
            background-color: #f2f2f2;
            transition: background-color 0.1s;
          }

          .same-as-selected,
          div:hover {
            background-color: lighten(#bbb, 10%);
          }
        }
      }

      .select-hide {
        display: none;
      }
    }

    .language {
      font-size: 12px;
      font-family: Arial, Helvetica, sans-serif;
      margin: 5px;
    }

    .btn-div {
      .control-btn {
        padding: 5px 10px 5px 10px;
        border: 1px solid #bbb;
        cursor: pointer;
        font-size: 12px;

        &:hover {
          background-color: rgba(255, 255, 255,0.7);
        }
      }

      .copy-btn {
        border-radius: 5px 0 0 5px;

        .copy-icon {
          width: 10px;
          height: 10px;
        }

        &.copy-btn-only {
          border-radius: 5px;
        }
      }

      .caption-btn {
        border-radius: 0 5px 5px 0;
        border-left: 0;
      }
    }
  }

  .content-container {
    position: relative;
    background-color: #f3f3f3;
    border-radius: 0 0 0 0;

    .rendered-layer {
      position: absolute;
      z-index: 0;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border: 0;

      pre {
        margin: 0;
        white-space: pre-wrap;
        word-wrap: break-word;

        code {
          font-size: 14px;
          padding: 20px;
          padding-top: 5px;
          // border-radius: 5px 5px 0 0;
          line-height: 2;
        }
      }
    }

    .input-layer {
      position: relative;
      z-index: 1;

      color: transparent;
      background: transparent;
      caret-color: black;
      border: 0;

      padding: 20px;
      padding-top: 5px;

      width: 100%;

      resize: none;
      overflow: hidden;
      min-height: 150px;

      outline: 0;

      &::selection {
        background-color: rgba(212, 236, 255, 0.5);
      }

      &::-moz-selection {
        background-color: rgba(212, 236, 255, 0.5);
      }
    }

    .input-layer,
    .rendered-layer,
    .rendered-layer * {
      font-size: 14px;
      font-family: monospace;
      tab-size: 2;
      line-height: 2;
    }
  }

  .caption-input {
    border: 0;
    outline: 0;
    margin-top: 5px;
    width: 100%;
    color: gray;
    background-color: transparent;
  }
}
