diff --git a/README.md b/README.md
index 150edcf83..ac340c2cc 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 # Photo Sphere Viewer
 
 [![Bower version](https://img.shields.io/bower/v/Photo-Sphere-Viewer.svg?style=flat-square)](http://photo-sphere-viewer.js.org)
-[![Build Status](https://img.shields.io/travis/mistic100/Photo-Sphere-Viewer.svg?style=flat-square)](https://travis-ci.org/mistic100/Photo-Sphere-Viewer)
+[![Build Status](https://img.shields.io/travis/mistic100/Photo-Sphere-Viewer/master.svg?style=flat-square)](https://travis-ci.org/mistic100/Photo-Sphere-Viewer)
 
 Photo Sphere Viewer is a JavaScript library that allows you to display 360×180 degrees panoramas on any web page. Panoramas must use the equirectangular projection and they can be taken with Photo Sphere, the camera mode brought by Android 4.2 Jelly Bean.
 
diff --git a/src/scss/_vars.scss b/src/scss/_vars.scss
new file mode 100644
index 000000000..c66241373
--- /dev/null
+++ b/src/scss/_vars.scss
@@ -0,0 +1,82 @@
+// scss-lint:disable ColorVariable
+$psv-main-background: radial-gradient(#ffffff, #fdfdfd 16%, #fbfbfb 33%, #f8f8f8 49%, #efefef 66%, #dfdfdf 82%, #bfbfbf 100%) !default !default;
+
+$psv-loader-color: rgba(61, 61, 61, .7) !default !default;
+$psv-loader-width: 150px !default !default;
+$psv-loader-tickness: 10px !default !default;
+$psv-loader-font: 14px sans-serif !default !default;
+
+$psv-navbar-height: 40px !default !default;
+$psv-navbar-background: rgba(61, 61, 61, .5) !default !default;
+
+$psv-caption-font: sans-serif !default !default;
+$psv-caption-color: rgba(255, 255, 255, .7) !default;
+
+$psv-buttons-height: 20px !default;
+$psv-buttons-padding: 10px !default;
+$psv-buttons-background: transparent !default;
+$psv-buttons-active-background: rgba(255, 255, 255, .1) !default;
+$psv-buttons-color: rgba(255, 255, 255, .7) !default;
+$psv-buttons-disabled-opacity: .5 !default;
+
+$psv-zoom-range-width: 80px !default;
+$psv-zoom-range-tickness: 1px !default;
+$psv-zoom-disk-diameter: 7px !default;
+$psv-zoom-buttons-width: 16px !default;
+
+$psv-tooltip-background-color: rgba(61, 61, 61, .8) !default;
+
+// set tooltip.offset JS config to the same value
+$psv-tooltip-animate-offset: 5px !default;
+// set tooltip.delay JS config to the same value
+$psv-tooltip-animate-delay: .1s !default;
+$psv-tooltip-radius: 4px !default;
+$psv-tooltip-padding: .5em 1em !default;
+// set tooltip.arrow_size JS config to the same value
+$psv-tooltip-arrow-size: 7px !default;
+$psv-tooltip-max-width: 200px !default;
+
+$psv-tooltip-text-color: rgb(255, 255, 255) !default;
+$psv-tooltip-font: 14px sans-serif !default;
+$psv-tooltip-text-shadow: 0 1px #000000 !default;
+
+$psv-tooltip-shadow-color: rgba(90, 90, 90, .7) !default;
+// the shadow is always at the opposite side of the arrow
+$psv-tooltip-shadow-offset: 3px !default;
+
+$psv-panel-background: rgba(10, 10, 10, .7) !default;
+$psv-panel-text-color: rgb(220, 220, 220) !default;
+
+$psv-panel-width: 400px !default;
+$psv-panel-padding: 1em !default;
+
+// must be odd
+$psv-panel-resizer-width: 9px !default;
+$psv-panel-resizer-background: rgba(0, 0, 0, .9) !default;
+$psv-panel-resizer-grip-color: #ffffff !default;
+// must be odd
+$psv-panel-resizer-grip-height: 29px !default;
+$psv-panel-close-button-width: 24px !default;
+$psv-panel-close-button-background: $psv-panel-resizer-background !default;
+$psv-panel-close-button-color: #ffffff !default;
+
+$psv-panel-font: 16px sans-serif !default;
+
+$psv-markers-list-image-size: 20px !default;
+$psv-markers-list-padding: .5em 1em !default;
+$psv-markers-list-hover-translation: 10px !default;
+
+$psv-markers-list-odd-background: rgba(255, 255, 255, .1) !default;
+$psv-markers-list-even-background: transparent !default;
+
+$psv-markers-list-title-shadow: 2px 1px #000000 !default;
+$psv-markers-list-title-font: 24px sans-serif !default;
+
+$psv-canvas-zindex: 0 !default;
+$psv-hud-zindex: 10 !default;
+$psv-polygon-marker-zindex: 20 !default;
+$psv-marker-zindex: 30 !default;
+$psv-tooltip-zindex: 50 !default;
+$psv-panel-zindex: 90 !default;
+$psv-navbar-zindex: 90 !default;
+$psv-loader-zindex: 100 !default;
diff --git a/src/scss/buttons/autorotate.scss b/src/scss/buttons/autorotate.scss
index 932bd7217..86c7b7343 100644
--- a/src/scss/buttons/autorotate.scss
+++ b/src/scss/buttons/autorotate.scss
@@ -1,5 +1,5 @@
 .psv-navbar .autorotate-button {
-  width: #{$buttons-height + $buttons-padding / 2};
-  height: #{$buttons-height + $buttons-padding / 2};
-  padding: #{$buttons-padding / 4 * 3};
+  width: #{$psv-buttons-height + $psv-buttons-padding / 2};
+  height: #{$psv-buttons-height + $psv-buttons-padding / 2};
+  padding: #{$psv-buttons-padding / 4 * 3};
 }
diff --git a/src/scss/buttons/markers.scss b/src/scss/buttons/markers.scss
index 2c7a2aa53..bb63408a7 100644
--- a/src/scss/buttons/markers.scss
+++ b/src/scss/buttons/markers.scss
@@ -1,9 +1,9 @@
 .psv-markers-list {
   h1 {
-    font: $markers-list-title-font;
+    font: $psv-markers-list-title-font;
     margin: 1em 0;
     text-align: center;
-    text-shadow: $markers-list-title-shadow;
+    text-shadow: $psv-markers-list-title-shadow;
   }
 
   ul {
@@ -15,8 +15,8 @@
 
   li {
     clear: both;
-    min-height: $markers-list-image-size;
-    padding: $markers-list-padding;
+    min-height: $psv-markers-list-image-size;
+    padding: $psv-markers-list-padding;
     cursor: pointer;
     transform: translateX(0);
     transition: transform .3s ease-in-out;
@@ -28,33 +28,33 @@
       top: 0;
       left: 0;
       height: 100%;
-      width: $markers-list-hover-translation;
-      margin-left: -$markers-list-hover-translation;
+      width: $psv-markers-list-hover-translation;
+      margin-left: -$psv-markers-list-hover-translation;
     }
 
     &:nth-child(odd), &:nth-child(odd)::before {
-      background: $markers-list-odd-background;
+      background: $psv-markers-list-odd-background;
     }
 
     &:nth-child(even), &:nth-child(even)::before {
-      background: $markers-list-even-background;
+      background: $psv-markers-list-even-background;
     }
 
     &:hover {
-      transform: translateX($markers-list-hover-translation);
+      transform: translateX($psv-markers-list-hover-translation);
       transition: transform .1s ease-in-out;
     }
   }
 
   .marker-image {
     float: left;
-    width: $markers-list-image-size;
+    width: $psv-markers-list-image-size;
   }
 
   .marker-name {
     margin: 0;
     padding: 0;
-    padding-left: calc(#{$markers-list-image-size} + #{nth($markers-list-padding, 1)});
+    padding-left: calc(#{$psv-markers-list-image-size} + #{nth($psv-markers-list-padding, 1)});
 
     &.no-image {
       padding-left: 0;
diff --git a/src/scss/buttons/zoom.scss b/src/scss/buttons/zoom.scss
index fc6adddbd..492433de0 100644
--- a/src/scss/buttons/zoom.scss
+++ b/src/scss/buttons/zoom.scss
@@ -1,13 +1,13 @@
 .psv-navbar .zoom-button {
   cursor: default;
-  width: #{$zoom-buttons-width * 3 + $zoom-range-width};
+  width: #{$psv-zoom-buttons-width * 3 + $psv-zoom-range-width};
 
   .minus, .plus {
     float: left;
     position: relative;
     cursor: pointer;
-    width: $zoom-buttons-width;
-    height: $zoom-buttons-width;
+    width: $psv-zoom-buttons-width;
+    height: $psv-zoom-buttons-width;
 
     svg {
       position: relative;
@@ -17,24 +17,24 @@
 
   .range {
     float: left;
-    padding: #{($buttons-height - $zoom-range-tickness) / 2} #{$zoom-buttons-width / 2};
+    padding: #{($psv-buttons-height - $psv-zoom-range-tickness) / 2} #{$psv-zoom-buttons-width / 2};
 
     .line {
       position: relative;
       cursor: pointer;
-      width: $zoom-range-width;
-      height: $zoom-range-tickness;
-      background: $buttons-color;
+      width: $psv-zoom-range-width;
+      height: $psv-zoom-range-tickness;
+      background: $psv-buttons-color;
       transition: all .3s ease;
     }
 
     .handle {
       position: absolute;
       border-radius: 50%;
-      top: #{($zoom-range-tickness - $zoom-disk-diameter) / 2};
-      width: $zoom-disk-diameter;
-      height: $zoom-disk-diameter;
-      background: $buttons-color;
+      top: #{($psv-zoom-range-tickness - $psv-zoom-disk-diameter) / 2};
+      width: $psv-zoom-disk-diameter;
+      height: $psv-zoom-disk-diameter;
+      background: $psv-buttons-color;
       transform: scale(1);
       transition: transform .3s ease;
     }
@@ -43,7 +43,7 @@
   &:not(.disabled):hover {
     .range {
       .line {
-        box-shadow: 0 0 2px $buttons-color;
+        box-shadow: 0 0 2px $psv-buttons-color;
       }
 
       .handle {
@@ -63,9 +63,9 @@
     }
 
     .minus, .plus {
-      width: $buttons-height;
-      height: $buttons-height;
-      padding: $buttons-padding;
+      width: $psv-buttons-height;
+      height: $psv-buttons-height;
+      padding: $psv-buttons-padding;
 
       svg {
         top: 0;
diff --git a/src/scss/hud.scss b/src/scss/hud.scss
index 207b7e545..e0f32bec3 100644
--- a/src/scss/hud.scss
+++ b/src/scss/hud.scss
@@ -1,7 +1,7 @@
 .psv-hud {
   @include user-select(none);
   position: absolute;
-  z-index: $hud-zindex;
+  z-index: $psv-hud-zindex;
   width: 100%;
   height: 100%;
 
@@ -9,7 +9,7 @@
     position: absolute;
     top: 0;
     left: 0;
-    z-index: $marker-zindex;
+    z-index: $psv-marker-zindex;
     background-size: contain;
     background-repeat: no-repeat;
     cursor: pointer;
@@ -31,7 +31,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: $polygon-marker-zindex;
+    z-index: $psv-polygon-marker-zindex;
 
     .svg-marker {
       cursor: pointer;
diff --git a/src/scss/loader.scss b/src/scss/loader.scss
index 86f2c3abe..8fb3bd9c1 100644
--- a/src/scss/loader.scss
+++ b/src/scss/loader.scss
@@ -7,16 +7,16 @@
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: $loader-zindex;
+  z-index: $psv-loader-zindex;
 
   // Pseudo element trick to vertically center elements
   .psv-loader {
     position: relative;
     text-align: center;
-    color: $loader-color;
-    width: $loader-width;
-    height: $loader-width;
-    border: $loader-tickness solid transparent;
+    color: $psv-loader-color;
+    width: $psv-loader-width;
+    height: $psv-loader-width;
+    border: $psv-loader-tickness solid transparent;
 
     &::before {
       content: '';
@@ -37,7 +37,7 @@
     }
 
     .loader-text {
-      font: $loader-font;
+      font: $psv-loader-font;
     }
   }
 }
diff --git a/src/scss/navbar.scss b/src/scss/navbar.scss
index 534a678db..4a97052e9 100644
--- a/src/scss/navbar.scss
+++ b/src/scss/navbar.scss
@@ -1,12 +1,12 @@
 .psv-navbar {
   @include flexbox();
   position: absolute;
-  z-index: $navbar-zindex;
-  bottom: -$navbar-height;
+  z-index: $psv-navbar-zindex;
+  bottom: -$psv-navbar-height;
   left: 0;
   width: 100%;
-  height: $navbar-height;
-  background: $navbar-background;
+  height: $psv-navbar-height;
+  background: $psv-navbar-background;
   transition: bottom ease-in-out .1s;
 
   &.open {
@@ -20,12 +20,12 @@
 
   .psv-caption {
     @include flex-grow(10);
-    color: $caption-color;
-    margin: $buttons-padding;
+    color: $psv-caption-color;
+    margin: $psv-buttons-padding;
     white-space: nowrap;
     overflow: hidden;
     text-align: center;
-    font-family: $caption-font;
+    font-family: $psv-caption-font;
   }
 
   @media (max-width: 800px) {
@@ -45,21 +45,21 @@
   .psv-button {
     @include flex-grow(0);
     @include flex-shrink(0);
-    padding: $buttons-padding;
+    padding: $psv-buttons-padding;
     position: relative;
     cursor: pointer;
-    height: $buttons-height;
-    width: $buttons-height;
-    background: $buttons-background;
-    color: $buttons-color;
+    height: $psv-buttons-height;
+    width: $psv-buttons-height;
+    background: $psv-buttons-background;
+    color: $psv-buttons-color;
 
     &.active {
-      background: $buttons-active-background;
+      background: $psv-buttons-active-background;
     }
 
     &.disabled {
       pointer-events: none;
-      opacity: $buttons-disabled-opacity;
+      opacity: $psv-buttons-disabled-opacity;
     }
 
     svg {
@@ -68,7 +68,7 @@
       transition: transform .3s ease;
 
       * {
-        fill: $buttons-color;
+        fill: $psv-buttons-color;
       }
     }
 
diff --git a/src/scss/panel.scss b/src/scss/panel.scss
index 30ad93c8b..5981faa9b 100644
--- a/src/scss/panel.scss
+++ b/src/scss/panel.scss
@@ -1,42 +1,42 @@
-$panel-resizer-grip-width: $panel-resizer-width - 4px;
+$psv-panel-resizer-grip-width: $psv-panel-resizer-width - 4px;
 
 .psv-panel {
   position: absolute;
-  z-index: $panel-zindex;
+  z-index: $psv-panel-zindex;
   right: 0;
   height: 100%;
-  width: $panel-width;
-  max-width: calc(100% - #{$panel-close-button-width});
-  background: $panel-background;
+  width: $psv-panel-width;
+  max-width: calc(100% - #{$psv-panel-close-button-width});
+  background: $psv-panel-background;
   transform: translate3d(100%, 0, 0);
   opacity: 0;
   transition-property: opacity, transform;
   transition-timing-function: ease-in-out;
   transition-duration: .1s;
   cursor: default;
-  margin-left: $panel-resizer-width;
+  margin-left: $psv-panel-resizer-width;
 
   .psv-container.has-navbar & {
-    height: calc(100% - #{$buttons-height + 2 * $buttons-padding});
+    height: calc(100% - #{$psv-buttons-height + 2 * $psv-buttons-padding});
   }
 
   .close-button {
     display: none;
     position: absolute;
     top: 0;
-    left: -$panel-close-button-width;
-    width: $panel-close-button-width;
-    height: $panel-close-button-width;
-    background: $panel-close-button-background;
+    left: -$psv-panel-close-button-width;
+    width: $psv-panel-close-button-width;
+    height: $psv-panel-close-button-width;
+    background: $psv-panel-close-button-background;
 
     &::before, &::after {
       content: '';
       position: absolute;
       top: 50%;
       left: 4px;
-      width: $panel-close-button-width - 9px;
+      width: $psv-panel-close-button-width - 9px;
       height: 1px;
-      background-color: $panel-close-button-color;
+      background-color: $psv-panel-close-button-color;
       transition: .2s ease-in-out;
       transition-property: width, left, transform;
     }
@@ -52,7 +52,7 @@ $panel-resizer-grip-width: $panel-resizer-width - 4px;
     &:hover {
       &::before, &::after {
         left: 0;
-        width: $panel-close-button-width - 1px;
+        width: $psv-panel-close-button-width - 1px;
       }
 
       &::before {
@@ -69,22 +69,22 @@ $panel-resizer-grip-width: $panel-resizer-width - 4px;
     display: none;
     position: absolute;
     top: 0;
-    left: -$panel-resizer-width;
-    width: $panel-resizer-width;
+    left: -$psv-panel-resizer-width;
+    width: $psv-panel-resizer-width;
     height: 100%;
-    background-color: $panel-resizer-background;
+    background-color: $psv-panel-resizer-background;
     cursor: col-resize;
 
-    @if $panel-resizer-grip-width > 0 {
+    @if $psv-panel-resizer-grip-width > 0 {
       &::before {
         content: '';
         position: absolute;
         top: 50%;
-        left: ($panel-resizer-width - $panel-resizer-grip-width) / 2 - 1px;
-        margin-top: (-$panel-resizer-grip-height / 2);
+        left: ($psv-panel-resizer-width - $psv-panel-resizer-grip-width) / 2 - 1px;
+        margin-top: (-$psv-panel-resizer-grip-height / 2);
         width: 1px;
         height: 1px;
-        box-shadow: make-dot-shadow($panel-resizer-grip-color, $panel-resizer-grip-width, $panel-resizer-grip-height);
+        box-shadow: make-dot-shadow($psv-panel-resizer-grip-color, $psv-panel-resizer-grip-width, $psv-panel-resizer-grip-height);
         background: transparent;
       }
     }
@@ -94,12 +94,12 @@ $panel-resizer-grip-width: $panel-resizer-width - 4px;
     width: 100%;
     height: 100%;
     box-sizing: border-box;
-    color: $panel-text-color;
-    font: $panel-font;
+    color: $psv-panel-text-color;
+    font: $psv-panel-font;
     overflow: auto;
 
     &:not(.no-margin) {
-      padding: $panel-padding;
+      padding: $psv-panel-padding;
     }
 
     &.no-interaction {
diff --git a/src/scss/photo-sphere-viewer.scss b/src/scss/photo-sphere-viewer.scss
index e8eac2965..eb311fdd4 100644
--- a/src/scss/photo-sphere-viewer.scss
+++ b/src/scss/photo-sphere-viewer.scss
@@ -1,86 +1,4 @@
-// scss-lint:disable ColorVariable
-$main-background: radial-gradient(#ffffff, #fdfdfd 16%, #fbfbfb 33%, #f8f8f8 49%, #efefef 66%, #dfdfdf 82%, #bfbfbf 100%);
-
-$loader-color: rgba(61, 61, 61, .7);
-$loader-width: 150px;
-$loader-tickness: 10px;
-$loader-font: 14px sans-serif;
-
-$navbar-height: 40px;
-$navbar-background: rgba(61, 61, 61, .5);
-
-$caption-font: sans-serif;
-$caption-color: rgba(255, 255, 255, .7);
-
-$buttons-height: 20px;
-$buttons-padding: 10px;
-$buttons-background: transparent;
-$buttons-active-background: rgba(255, 255, 255, .1);
-$buttons-color: rgba(255, 255, 255, .7);
-$buttons-disabled-opacity: .5;
-
-$zoom-range-width: 80px;
-$zoom-range-tickness: 1px;
-$zoom-disk-diameter: 7px;
-$zoom-buttons-width: 16px;
-
-$tooltip-background-color: rgba(61, 61, 61, .8);
-
-// set tooltip.offset JS config to the same value
-$tooltip-animate-offset: 5px;
-// set tooltip.delay JS config to teh same value
-$tooltip-animate-delay: .1s;
-$tooltip-radius: 4px;
-$tooltip-padding: .5em 1em;
-// set tooltip.arrow_size JS config to the same value
-$tooltip-arrow-size: 7px;
-$tooltip-max-width: 200px;
-
-$tooltip-text-color: rgb(255, 255, 255);
-$tooltip-font: 14px sans-serif;
-$tooltip-text-shadow: 0 1px #000000;
-
-$tooltip-shadow-color: rgba(90, 90, 90, .7);
-// the shadow is always at the opposite side of the arrow
-$tooltip-shadow-offset: 3px;
-
-$panel-background: rgba(10, 10, 10, .7);
-$panel-text-color: rgb(220, 220, 220);
-
-$panel-width: 400px;
-$panel-padding: 1em;
-
-// must be odd
-$panel-resizer-width: 9px;
-$panel-resizer-background: rgba(0, 0, 0, .9);
-$panel-resizer-grip-color: #ffffff;
-// must be odd
-$panel-resizer-grip-height: 29px;
-$panel-close-button-width: 24px;
-$panel-close-button-background: $panel-resizer-background;
-$panel-close-button-color: #ffffff;
-
-$panel-font: 16px sans-serif;
-
-$markers-list-image-size: 20px;
-$markers-list-padding: .5em 1em;
-$markers-list-hover-translation: 10px;
-
-$markers-list-odd-background: rgba(255, 255, 255, .1);
-$markers-list-even-background: transparent;
-
-$markers-list-title-shadow: 2px 1px #000000;
-$markers-list-title-font: 24px sans-serif;
-
-$canvas-zindex: 0;
-$hud-zindex: 10;
-$polygon-marker-zindex: 20;
-$marker-zindex: 30;
-$tooltip-zindex: 50;
-$panel-zindex: 90;
-$navbar-zindex: 90;
-$loader-zindex: 100;
-
+@import 'vars';
 @import 'mixins';
 
 .psv-container {
@@ -89,14 +7,14 @@ $loader-zindex: 100;
   margin: 0;
   padding: 0;
   position: relative;
-  background: $main-background;
+  background: $psv-main-background;
   overflow: hidden;
 
   .canvas-container {
     position: absolute;
     top: 0;
     left: 0;
-    z-index: $canvas-zindex;
+    z-index: $psv-canvas-zindex;
 
     canvas {
       display: block;
diff --git a/src/scss/tooltip.scss b/src/scss/tooltip.scss
index cd1a89611..4a8bceda6 100644
--- a/src/scss/tooltip.scss
+++ b/src/scss/tooltip.scss
@@ -1,112 +1,112 @@
 .psv-tooltip {
   position: absolute;
-  z-index: $tooltip-zindex;
+  z-index: $psv-tooltip-zindex;
   box-sizing: border-box;
-  max-width: $tooltip-max-width;
-  background-color: $tooltip-background-color;
-  border-radius: $tooltip-radius;
-  padding: $tooltip-padding;
+  max-width: $psv-tooltip-max-width;
+  background-color: $psv-tooltip-background-color;
+  border-radius: $psv-tooltip-radius;
+  padding: $psv-tooltip-padding;
   opacity: 0;
   transition-property: opacity;
   transition-timing-function: ease-in-out;
-  transition-duration: $tooltip-animate-delay;
+  transition-duration: $psv-tooltip-animate-delay;
 
   .content {
-    color: $tooltip-text-color;
-    font: $tooltip-font;
-    text-shadow: $tooltip-text-shadow;
+    color: $psv-tooltip-text-color;
+    font: $psv-tooltip-font;
+    text-shadow: $psv-tooltip-text-shadow;
   }
 
   .arrow {
     position: absolute;
     height: 0;
     width: 0;
-    border: $tooltip-arrow-size solid transparent;
+    border: $psv-tooltip-arrow-size solid transparent;
   }
 
   &.bottom-center {
-    box-shadow: 0 $tooltip-shadow-offset 0 $tooltip-shadow-color;
-    transform: translate3d(0, -$tooltip-animate-offset, 0);
+    box-shadow: 0 $psv-tooltip-shadow-offset 0 $psv-tooltip-shadow-color;
+    transform: translate3d(0, -$psv-tooltip-animate-offset, 0);
     transition-property: opacity, transform;
 
     .arrow {
-      border-bottom-color: $tooltip-background-color;
+      border-bottom-color: $psv-tooltip-background-color;
     }
   }
 
   &.center-left {
-    box-shadow: #{-$tooltip-shadow-offset} 0 0 $tooltip-shadow-color;
-    transform: translate3d($tooltip-animate-offset, 0, 0);
+    box-shadow: #{-$psv-tooltip-shadow-offset} 0 0 $psv-tooltip-shadow-color;
+    transform: translate3d($psv-tooltip-animate-offset, 0, 0);
     transition-property: opacity, transform;
 
     .arrow {
-      border-left-color: $tooltip-background-color;
+      border-left-color: $psv-tooltip-background-color;
     }
   }
 
   &.top-center {
-    box-shadow: 0 #{-$tooltip-shadow-offset} 0 $tooltip-shadow-color;
-    transform: translate3d(0, $tooltip-animate-offset, 0);
+    box-shadow: 0 #{-$psv-tooltip-shadow-offset} 0 $psv-tooltip-shadow-color;
+    transform: translate3d(0, $psv-tooltip-animate-offset, 0);
     transition-property: opacity, transform;
 
     .arrow {
-      border-top-color: $tooltip-background-color;
+      border-top-color: $psv-tooltip-background-color;
     }
   }
 
   &.center-right {
-    box-shadow: $tooltip-shadow-offset 0 0 $tooltip-shadow-color;
-    transform: translate3d(-$tooltip-animate-offset, 0, 0);
+    box-shadow: $psv-tooltip-shadow-offset 0 0 $psv-tooltip-shadow-color;
+    transform: translate3d(-$psv-tooltip-animate-offset, 0, 0);
     transition-property: opacity, transform;
 
     .arrow {
-      border-right-color: $tooltip-background-color;
+      border-right-color: $psv-tooltip-background-color;
     }
   }
 
   &.bottom-left {
-    box-shadow: #{-$tooltip-shadow-offset} $tooltip-shadow-offset 0 $tooltip-shadow-color;
-    transform: translate3d(0, -$tooltip-animate-offset, 0);
+    box-shadow: #{-$psv-tooltip-shadow-offset} $psv-tooltip-shadow-offset 0 $psv-tooltip-shadow-color;
+    transform: translate3d(0, -$psv-tooltip-animate-offset, 0);
     transition-property: opacity, transform;
 
     .arrow {
-      border-bottom-color: $tooltip-background-color;
+      border-bottom-color: $psv-tooltip-background-color;
     }
   }
 
   &.bottom-right {
-    box-shadow: $tooltip-shadow-offset $tooltip-shadow-offset 0 $tooltip-shadow-color;
-    transform: translate3d(0, -$tooltip-animate-offset, 0);
+    box-shadow: $psv-tooltip-shadow-offset $psv-tooltip-shadow-offset 0 $psv-tooltip-shadow-color;
+    transform: translate3d(0, -$psv-tooltip-animate-offset, 0);
     transition-property: opacity, transform;
 
     .arrow {
-      border-bottom-color: $tooltip-background-color;
+      border-bottom-color: $psv-tooltip-background-color;
     }
   }
 
   &.top-left {
-    box-shadow: #{-$tooltip-shadow-offset} #{-$tooltip-shadow-offset} 0 $tooltip-shadow-color;
-    transform: translate3d(0, $tooltip-animate-offset, 0);
+    box-shadow: #{-$psv-tooltip-shadow-offset} #{-$psv-tooltip-shadow-offset} 0 $psv-tooltip-shadow-color;
+    transform: translate3d(0, $psv-tooltip-animate-offset, 0);
     transition-property: opacity, transform;
 
     .arrow {
-      border-top-color: $tooltip-background-color;
+      border-top-color: $psv-tooltip-background-color;
     }
   }
 
   &.top-right {
-    box-shadow: $tooltip-shadow-offset #{-$tooltip-shadow-offset} 0 $tooltip-shadow-color;
-    transform: translate3d(0, $tooltip-animate-offset, 0);
+    box-shadow: $psv-tooltip-shadow-offset #{-$psv-tooltip-shadow-offset} 0 $psv-tooltip-shadow-color;
+    transform: translate3d(0, $psv-tooltip-animate-offset, 0);
     transition-property: opacity, transform;
 
     .arrow {
-      border-top-color: $tooltip-background-color;
+      border-top-color: $psv-tooltip-background-color;
     }
   }
 
   &.visible {
     transform: translate3d(0, 0, 0);
     opacity: 1;
-    transition-duration: $tooltip-animate-delay;
+    transition-duration: $psv-tooltip-animate-delay;
   }
 }