/*
CodeSelect Gadget - CSS styling. Activates all .code-select fields on the site. By clicking the icon the code is copied to clipboard and tooltip is changed
See detailed documentation in Dev/mediawiki
*/

/* 1. General */

#global-code-select-copy-text-helper {
  position: absolute;
  opacity: 0;
  top: -9000px;
  left: -9000px;
}

.code-select {
  display: inline-block;
  background: #f6f6f6;
  border-radius: 7px;
  box-shadow: inset 2px 2px 6px rgba(0,0,0,0.05);
  border: 1px solid #e3e3e3;
  padding: 5px 13px 0 40px;
  position: relative;
  max-width: 100%;
  vertical-align: middle;
  min-height: 31px;
  overflow: auto;
}

html.client-nojs .code-select {
  font-family: Courier, monospace;
  font-size: 14px;
  color: #0054a8;
  line-height: 1.6em;
  width: 100%;
  overflow: auto;
  white-space: pre;
  padding: 4px 13px 2px 15px;
  cursor: auto !important;
}

.code-select,
.code-select > *:not(.cbutton) {
  cursor: copy !important;
}
.code-select:hover {
  border-color: #d8d8d8;
  background: #f0f0f0;
}

.code-select.js-loading {
  white-space: unset;
}

.code-select.js-fully-loaded {
  overflow: visible;
  padding-left: 38px;
  white-space: unset;
}

/* 2. Tooltip */

.code-select .tooltip2 {
  position: absolute;
  top: -39px;
  left: 6px;
  background: white;
  color: #337cd9;
  border: 1px solid #337cd9;
  padding: 6px 10px;
  border-radius: 6px;
  z-index: 1010;
  font-weight: bold;
  font-size: 14px;
  display: none;
  white-space: nowrap;
  font-family: Courier, monospace;
}
.code-select .tooltip2::after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 7px;
  border-width: 7px;
  border-style: solid;
  border-color: #337cd9 transparent transparent transparent;
}
.code-select .tooltip2 .copied { display: none; }
.code-select .tooltip2 .hover { display: inline-block; }
.code-select.copied .tooltip2 .copied { display: inline-block; }
.code-select.copied .tooltip2 .hover { display: none; }
.code-select.copied .tooltip2 {
  display: inline-block;
  background: #07c007;
  border-color: #01b101;
  color: white;
}
.code-select.copied .tooltip2::after {
  border-top-color: #00a400;
}

.code-select .tooltip2 .copied > i {
  margin-right: 3px;
  position: relative;
  top: 1px;
}

.code-select > .cbutton:hover ~ .tooltip2 {
  display: inline-block;
}

/* 3. Icon */

.code-select > .cbutton {
  cursor: pointer;
  display: inline-block;
}

.code-select:not([data-button-image-src]) > .cbutton {
  position: absolute;
  left: 8px;
  top: 2px;
  height: 25px;
  width: 27px;
  text-align: center;
  padding-top: 4px;
  border-radius: 5px;
  color: #5594c7;
  font-size: 16px;
}

.code-select > .cbutton.fa-check {
  color: #00d400;
}

.code-select:not(.copied) > .cbutton:hover {
  color: #0054a8;
}

/* 4. Text-Containers */

.code-select .viewport {
  width: 100%;
  display: block;
}

.code-select.cs-no-custom-scrollbars .viewport {
  overflow: auto;
}

.code-select .code,
.code-select {
  font-family: 'Cousine', monospace, Courier;
  font-size: 13px;
  color: #0054a8;
  line-height: 1.6em;
  width: 100%;
  white-space: pre;
}

.code-select .code {
  overflow: visible;
  padding: 0 0 0 2px;
  display: block;
  width: fit-content;
}

.code-select.inline-style .code,
.code-select.inline-style {
  width: auto;
  white-space: unset;
}

.code-select.breaklines-style .code,
.code-select.breaklines-style:not(.js-fully-loaded) {
  white-space: pre-line;
}

/* 5. Variant : Image Button */

html.client-nojs .code-select[data-button-image-src] {
  display: none !important;
}

.code-select[data-button-image-src] {
  border: none;
  background: transparent;
  padding: 0;
  width: 30px;
  height: 30px;
  box-shadow: none;
}

.code-select[data-button-image-src] img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.code-select[data-button-image-src],
.code-select[data-button-image-src] > *:not(.cbutton) {
  cursor: auto !important;
}

.code-select[data-button-image-src]:not(.js-fully-loaded) {
  visibility: hidden;
}

.code-select[data-button-image-src] .cbutton:not(i) {
  width: inherit;
  height: auto;
  transition: filter .3s;
}

.code-select[data-button-image-src] .cbutton:not(i):hover {
  filter: brightness( .97 );
}

.code-select[data-button-image-src] i.cbutton {
  color: #5594c7;
  font-size: 18px;
  position: absolute;
  top: calc( 50% - 10px );
  left: calc( 50% - 10px );
}

.code-select[data-button-image-src] i.cbutton:hover {
  color: #003870;
}

.code-select[data-button-image-src] .tooltip2 {
  top: -43px;
  left: -3px;
}

.code-select[data-button-image-src] .tooltip2::after {
  left: 9px;
}

.code-select[data-button-image-src] .code {
  width: 2px;
  height: 2px;
  display: inline-block;
  opacity: 0;
  overflow: hidden;
}

/* 6. CodeSelect with target */

.code-select-target-helper {
  position: relative;
}

.code-select[data-target] {
  display: none;
}

.code-select-target-helper .code-select[data-target] {
  display: block;
}

/*
[[Category:MultiWiki]]
*/