/*
 * Copyright 2018 IBM Corporation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * Font zooming support
 *
 */

/* zoom overlay */
.zoom-overlay {
  position: absolute;
}

/* when sidecar is minimized, don't listen to data-zoom */
[data-zoom] #sidecar.minimized .sidecar-bottom-stripe {
  font-size: 0.875em;
}

/* transition effects for font zooming */
.repl-inner,
#sidecar .sidecar-content,
#sidecar .custom-content {
  transition: font-size 10ms ease-in-out;
}
.page[data-zoom] .repl-result-prefix {
  transition: none;
}

/* finally, these rules define the zoom levels */
/*.page[data-zoom="1"] .zoomable .view-lines > div,
.page[data-zoom="1"] .zoomable { font-size: 100% !important; }*/
.page[data-zoom="1"] svg.zoomable {
  transform: scale(1);
}
.page[data-zoom="2"] .zoomable .view-lines > div,
.page[data-zoom="2"] .zoomable {
  font-size: 106.25% !important;
}
.page[data-zoom="2"] .graphical-icon > svg {
  width: 21.25px;
  height: 21.25px;
}
.page[data-zoom="3"] .zoomable .view-lines > div,
.page[data-zoom="3"] .zoomable {
  font-size: 112.5% !important;
}
.page[data-zoom="3"] .graphical-icon > svg {
  width: 22.25px;
  height: 22.25px;
}
.page[data-zoom="4"] .zoomable .view-lines > div,
.page[data-zoom="4"] .zoomable {
  font-size: 118.75% !important;
}
.page[data-zoom="4"] .zoomable[data-bounded-zoom] {
  font-size: 112.5% !important;
}
.page[data-zoom="4"] .graphical-icon > svg {
  width: 23.75px;
  height: 23.75px;
}
.page[data-zoom="5"] .zoomable .view-lines > div,
.page[data-zoom="5"] .zoomable {
  font-size: 125% !important;
}
.page[data-zoom="5"] .zoomable[data-bounded-zoom] {
  font-size: 112.5% !important;
}
.page[data-zoom="5"] .graphical-icon > svg {
  width: 25px;
  height: 25px;
}
.page[data-zoom="6"] .zoomable .view-lines > div,
.page[data-zoom="6"] .zoomable {
  font-size: 131.25% !important;
}
.page[data-zoom="6"] .zoomable[data-bounded-zoom] {
  font-size: 112.5% !important;
}
.page[data-zoom="6"] .graphical-icon > svg {
  width: 26.25px;
  height: 26.25px;
}
.page[data-zoom="7"] .zoomable .view-lines > div,
.page[data-zoom="7"] .zoomable {
  font-size: 137.5% !important;
}
.page[data-zoom="7"] .zoomable[data-bounded-zoom] {
  font-size: 112.5% !important;
}
.page[data-zoom="7"] .graphical-icon > svg {
  width: 27.5px;
  height: 27.5px;
}
.page[data-zoom="8"] .zoomable .view-lines > div,
.page[data-zoom="8"] .zoomable {
  font-size: 143.75% !important;
}
.page[data-zoom="8"] .zoomable[data-bounded-zoom] {
  font-size: 112.5% !important;
}
.page[data-zoom="8"] .graphical-icon > svg {
  width: 28.75px;
  height: 28.75px;
}
.page[data-zoom="9"] .zoomable .view-lines > div,
.page[data-zoom="9"] .zoomable {
  font-size: 150% !important;
}
.page[data-zoom="9"] .zoomable[data-bounded-zoom] {
  font-size: 112.5% !important;
}
.page[data-zoom="9"] .graphical-icon > svg {
  width: 30px;
  height: 30px;
}
.page[data-zoom="10"] .zoomable .view-lines > div,
.page[data-zoom="10"] .zoomable {
  font-size: 156.25% !important;
}
.page[data-zoom="10"] .zoomable[data-bounded-zoom] {
  font-size: 112.5% !important;
}
.page[data-zoom="10"] .graphical-icon > svg {
  width: 31.25px;
  height: 31.25px;
}
.page[data-zoom="0"] .zoomable .view-lines > div,
.page[data-zoom="0"] .zoomable {
  font-size: 93.75% !important;
}
.page[data-zoom="0"] .zoomable[data-bounded-zoom] {
  font-size: 100% !important;
}
.page[data-zoom="0"] .graphical-icon > svg {
  width: 18.75px;
  height: 18.75px;
}
.page[data-zoom="-1"] .zoomable .view-lines > div,
.page[data-zoom="-1"] .zoomable {
  font-size: 87.5% !important;
}
.page[data-zoom="-1"] .zoomable[data-bounded-zoom] {
  font-size: 100% !important;
}
.page[data-zoom="-1"] .graphical-icon > svg {
  width: 17.5px;
  height: 17.5px;
}
.page[data-zoom="-2"] .zoomable .view-lines > div,
.page[data-zoom="-2"] .zoomable {
  font-size: 81.25% !important;
}
.page[data-zoom="-2"] .zoomable[data-bounded-zoom] {
  font-size: 100% !important;
}
.page[data-zoom="-2"] .graphical-icon > svg {
  width: 16.25px;
  height: 16.25px;
}