/**
 * Fileoverview: Styles for code translations within the Learn CMS.
 * author: Jeff Bull (jeff@bitsbox.com)
 */

/**
 * Styles for the code translation section of the project details page.
 */
.code-wrapper {
  padding: 0;
  cursor: pointer !important;
}
.code-line {
  position: relative;
  padding: 0;
  user-select: none;
}
.code-line.end {
  margin-bottom: 18px;
}
.code-line pre {
  padding-top: 0px !important;
  padding-bottom: 1px !important;
  border-radius: 0;
  border-top: none;
  border-bottom: none;
  margin-top: 0;
}
.code-line.start,
.code-line.visible+.code-line {
  margin-top: 36px;
}
.code-line.start::before,
.code-line.visible+.code-line::before {
  content: '';
  position: absolute;
  left: 0;
  width: calc(100% - 2px);
  height: 16px;
  top: -16px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border: 1px solid #999;
  border-bottom: none;
}
.code-line.end::before,
.code-line.visible::before {
  content: '';
  position: absolute;
  left: 0;
  width: calc(100% - 2px);
  height: 16px;
  top: 26px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  border: 1px solid #999;
  border-top: none;
  z-index: 10;
}
.code-line.start.visible::before,
.code-line.start-single-line::before,
.code-line.visible+.code-line.visible::before,
.code-line.visible+.code-line.end::before {
  content: '';
  position: absolute;
  left: 0;
  width: calc(100% - 2px);
  height: 56px;
  top: -16px;
  border-radius: 12px;
  border: 1px solid #999;
}
.code-line pre::before {
  content: attr(line-number);
  height: auto;
  margin-top: 0;
}
.code-line.visible pre {
  background: #eee;
}
.code-line:hover pre {
  background: #eee;
  position: relative;
}
.code-line:hover::after,
.code-line.visible::after {
  content: '\f0da';
  line-height: 25px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  position: absolute;
  left: -26px;
  top: 3px;
  font-size: 32px;
  text-align: center;
  transition: transform .2s;
  z-index: 500;
  transform-origin: center center;
  color: #808080;
  opacity: .99;
}
.code-line.visible::after {
  transform: rotate(90deg) translate(-2px, 4px);
}

ul.code-translation {
  margin-top: 3px;
  padding-left: 62px;
  list-style: none;
  margin-bottom: 6px;
  line-height: 20px;
  display: none;
}
ul.code-translation li:before,
.ql-editor ul.code-translation li::before {
  content: "\00BB ";
  position: relative;
  left: -28px;
  margin-right: -6px;
}
.ql-editor .code-translation li:not(.ql-direction-rtl)::before {
  margin-left: 0em;
}
.code-translation-line-number {
  color: #f7931d;
  margin-left: 35px;
  margin-top: 30px;
  font-weight: bold;
  display: none;
}
.code-line.visible .code-translation-line-number,
.code-line.visible ul.code-translation {
  display: block;
}

/**
 * Format of Javascript code.
 */
code {
 font-family: 'Source Code Pro', monospace !important;
}
pre.ql-syntax, .ql-syntax, pre {
  position: relative;
  border-radius: 12px;
  border: 1px solid #999;
  padding: 16px 24px 16px 60px !important;
  overflow: hidden;
  font-size: 17px !important;
  font-family: 'Source Code Pro', monospace !important;
  line-height: 26px;
  letter-spacing: -1px;
  font-weight: 500;
  margin-top: 12px;
  margin-bottom: 0;
  margin-left: 0px;
}
pre.ql-syntax::before, .ql-syntax::before, pre::before {
  content: '1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70';
  color: #f7931d;
  position: absolute;
  margin-top: 1px;
  margin-left: -45px;
  width: 25px;
  white-space: normal;
  text-align: right;
  font-weight: bold;
  height: calc(100% - 28px);
  overflow: hidden;
  user-select: none;
  font-size: 17px;
  font-family: 'Source Code Pro', monospace;
  line-height: 26px;
}
.collapsed pre::before {
  display: none;
}

/* Play and copy buttons */
.code-translator-play-button:after {
  font-family: 'Font Awesome 5 Pro';
  font-weight: bold;
  font-size: 15px;
  content: '\f04b';
  position: absolute;
  margin-top: 6px;
  margin-left: 394px;
  cursor: pointer;
  color: #a5a5a5;
}
.code-translator-copy-button:after {
  font-family: 'Font Awesome 5 Pro';
  font-weight: bold;
  font-size: 15px;
  content: '\f0c5';
  position: absolute;
  margin-top: 6px;
  margin-left: 420px;
  cursor: pointer;
  color: #a5a5a5;
}
.collapsed .code-translator-play-button:after,
.collapsed .code-translator-copy-button:after {
  display: none;
}