@mixin transition($property) {
  -webkit-transition: $property;
     -moz-transition: $property;
      -ms-transition: $property;
       -o-transition: $property;
          transition: $property;
}

.chardinjs-overlay {
  position: absolute;
  z-index: 999999;
  background-color: #000;
  opacity: 0;
  @include transition(all 0.3s ease-out);
}

.chardinjs-helper-layer {
  position: absolute;
  z-index: 9999998;
  color: white;
  @include transition(all 0.3s ease-out);

  &.chardinjs-left { border-left: solid white 1px; margin-left: -10px; }
  &.chardinjs-right { border-right: solid white 1px; padding-right: 10px; }
  &.chardinjs-bottom { border-bottom: solid white 1px; padding-bottom: 10px; }
  &.chardinjs-top { border-top: solid white 1px; padding-top: 10px; }
}

.chardinjs-tooltip {
  position: absolute;
  @include transition(opacity 0.1s ease-out);
  max-width: 200px;

  &.chardinjs-left { margin-left: -135px; padding-right: 10px; }
  &.chardinjs-right { margin-right: -135px; padding-left: 10px; }
  &.chardinjs-bottom { margin-bottom: -50px; padding-top: 10px; }
  &.chardinjs-top { margin-top: -50px; padding-bottom: 10px; }

  &.chardinjs-right:before, &.chardinjs-left:after, &.chardinjs-bottom:before, &.chardinjs-top:after {
    content: ".";
    display: inline-block;
    background-color: white;
    height: 1px;
    overflow: hidden;
    position: absolute;
  }

  &.chardinjs-right:before, &.chardinjs-left:after {
    width: 100px;
    top: 50%;
  }

  &.chardinjs-bottom:before, &.chardinjs-top:after {
    width: 1px;
    height: 50px;
    left: 50%;
  }

  &.chardinjs-bottom:before { top: -50px; }
  &.chardinjs-top:after { bottom: -50px; }
  &.chardinjs-right:before { left: -100px; }
  &.chardinjs-left:after { right: -100px; }
}

.chardinjs-show-element {
  z-index: 9999999;
  opacity: 0.8;
}

.chardinjs-relative-position {
  position: relative;
}