/*
 * 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
 *
 */

/* percentage increase with progressively higher zoom levels */
$step: 0.0625;

/* match this with MAX_ZOOM_IN in zoom.ts; k gives k-1 zoom levels */
$MAX_ZOOM_IN: 12;

/* match this with -MAX_ZOOM_OUT in zoom.ts; k gives k+1 zoom levels */
$MAX_ZOOM_OUT: 2;

/* transition effects for font zooming */
.repl-inner,
#sidecar .sidecar-content,
#sidecar .custom-content {
  transition: font-size 10ms ease-in-out;
}

/* zooming in */
@for $i from 1 through $MAX_ZOOM_IN {
  html.kui[data-zoom="#{$i}"] {
    font-size: calc(var(--kui--master-font-size) * (1 + #{$step} * #{$i - 1}));

    svg[width="16"] {
      width: calc(16px * (1 + #{$step} * #{$i - 1}) * var(--kui--master-font-scale));
      height: calc(16px * (1 + #{$step} * #{$i - 1}) * var(--kui--master-font-scale));
    }

    .graphical-icon > svg,
    svg[width="20"] {
      width: calc(20px * (1 + #{$step} * #{$i - 1}) * var(--kui--master-font-scale));
      height: calc(20px * (1 + #{$step} * #{$i - 1}) * var(--kui--master-font-scale));
    }
  }
}

/* zooming out */
@for $i from 0 through $MAX_ZOOM_OUT {
  html.kui[data-zoom="#{-$i}"] {
    font-size: calc(var(--kui--master-font-size) * (1 - #{$step} * #{$i + 1}));

    svg[width="16"] {
      width: calc(16px * (1 - #{$step} * #{$i + 1}) * var(--kui--master-font-scale));
      height: calc(16px * (1 - #{$step} * #{$i + 1}) * var(--kui--master-font-scale));
    }

    .graphical-icon > svg,
    svg[width="20"] {
      width: calc(20px * (1 - #{$step} * #{$i + 1}) * var(--kui--master-font-scale));
      height: calc(20px * (1 - #{$step} * #{$i + 1}) * var(--kui--master-font-scale));
    }
  }
}

html {
  &[data-zoom="1"] svg.zoomable {
    transform: scale(1);
  }
}
