.transition(@d) {
  -webkit-transition-duration: @d;
  transition-duration: @d;
}
.delay(@d) {
  -webkit-transition-delay: @d;
  transition-delay: @d;
}
.transform(@t) {
  -webkit-transform: @t;
  transform: @t;
}
.transform-origin(@to) {
  -webkit-transform-origin: @to;
  transform-origin: @to;
}
.translate3d(@x:0, @y:0, @z:0) {
  -webkit-transform: translate3d(@x,@y,@z);
  transform: translate3d(@x,@y,@z);
}
.animation (@a) {
  -webkit-animation: @a;
  animation: @a;
}
.scrollable() {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.flex-shrink(@fs) {
  -webkit-box-flex: @fs;
  -webkit-flex-shrink: @fs;
  -ms-flex: 0 @fs auto;
  flex-shrink: @fs;
}
.clearfix() {
  &:after,
  &:before {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}
.hairline(@position, @color) when (@position = top) {
  &:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    right: auto;
    height: 1px;
    width: 100%;
    background-color: @color;
    display: block;
    z-index: 15;
    // .transform-origin(50% 0%);
    html.pixel-ratio-2 & {
      .transform(scaleY(0.5));
    }
    html.pixel-ratio-3 & {
      .transform(scaleY(0.33));
    }
  }
}
.hairline(@position, @color) when (@position = left) {
  &:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    right: auto;
    width: 1px;
    height: 100%;
    background-color: @color;
    display: block;
    z-index: 15;
    // .transform-origin(0% 50%);
    html.pixel-ratio-2 & {
      .transform(scaleX(0.5));
    }
    html.pixel-ratio-3 & {
      .transform(scaleX(0.33));
    }
  }

}
.hairline(@position, @color) when (@position = bottom) {
  &:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    right: auto;
    top: auto;
    height: 1px;
    width: 100%;
    background-color: @color;
    display: block;
    z-index: 15;
    html.pixel-ratio-2 & {
      .transform(scaleY(0.5));
    }
    html.pixel-ratio-3 & {
      .transform(scaleY(0.33));
    }
  }
}
.hairline(@position, @color) when (@position = right) {
  &:after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    left: auto;
    bottom: auto;
    width: 1px;
    height: 100%;
    background-color: @color;
    display: block;
    z-index: 15;
    // .transform-origin(100% 50%);
    html.pixel-ratio-2 & {
      .transform(scaleX(0.5));
    }
    html.pixel-ratio-3 & {
      .transform(scaleX(0.33));
    }
  }
}
// For right and bottom
.hairline-remove(@position) when not (@position = left) and not (@position = top) {
  &:after {
    display: none;
  }
}
// For left and top
.hairline-remove(@position) when not (@position = right) and not (@position = bottom) {
  &:before {
    display: none;
  }
}
// For right and bottom
.hairline-color(@position, @color) when not (@position = left) and not (@position = top) {
  &:after {
    background-color: @color;
  }
}
// For left and top
.hairline-color(@position, @color) when not (@position = right) and not (@position = bottom) {
  &:before {
    background-color: @color;
  }
}
// Encoded SVG Background
.encoded-svg-background(@svg) {
  @url: `encodeURIComponent(@{svg})`;
  background-image: url("data:image/svg+xml;charset=utf-8,@{url}");
}
// Preserve3D
.preserve3d() {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

// Shadow
.depth(@level:1) {
  & when (@level = 0) {
    box-shadow: none;
  }
  & when (@level = 1) {
    box-shadow: 0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
  }
  & when (@level = 2) {
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
  }
  & when (@level = 3) {
    box-shadow: 0 3px 3px -2px rgba(0,0,0,.2),0 3px 4px 0 rgba(0,0,0,.14),0 1px 8px 0 rgba(0,0,0,.12);
  }
  & when (@level = 4) {
    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);
  }
  & when (@level = 5) {
    box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 5px 8px 0 rgba(0,0,0,.14),0 1px 14px 0 rgba(0,0,0,.12);
  }
  & when (@level = 6) {
    box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);
  }
  & when (@level = 7) {
    box-shadow: 0 4px 5px -2px rgba(0,0,0,.2),0 7px 10px 1px rgba(0,0,0,.14),0 2px 16px 1px rgba(0,0,0,.12);
  }
  & when (@level = 8) {
    box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);
  }
  & when (@level = 9) {
    box-shadow: 0 5px 6px -3px rgba(0,0,0,.2),0 9px 12px 1px rgba(0,0,0,.14),0 3px 16px 2px rgba(0,0,0,.12);
  }
  & when (@level = 10) {
    box-shadow: 0 6px 6px -3px rgba(0,0,0,.2),0 10px 14px 1px rgba(0,0,0,.14),0 4px 18px 3px rgba(0,0,0,.12);
  }
  & when (@level = 11) {
    box-shadow: 0 6px 7px -4px rgba(0,0,0,.2),0 11px 15px 1px rgba(0,0,0,.14),0 4px 20px 3px rgba(0,0,0,.12);
  }
  & when (@level = 12) {
    box-shadow: 0 7px 8px -4px rgba(0,0,0,.2),0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12);
  }
  & when (@level = 13) {
    box-shadow: 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
  }
  & when (@level = 14) {
    box-shadow: 0 7px 9px -4px rgba(0,0,0,.2),0 14px 21px 2px rgba(0,0,0,.14),0 5px 26px 4px rgba(0,0,0,.12);
  }
  & when (@level = 15) {
    box-shadow: 0 8px 9px -5px rgba(0,0,0,.2),0 15px 22px 2px rgba(0,0,0,.14),0 6px 28px 5px rgba(0,0,0,.12);
  }
  & when (@level = 16) {
    box-shadow: 0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12);
  }
  & when (@level = 17) {
    box-shadow: 0 8px 11px -5px rgba(0,0,0,.2),0 17px 26px 2px rgba(0,0,0,.14),0 6px 32px 5px rgba(0,0,0,.12);
  }
  & when (@level = 18) {
    box-shadow: 0 9px 11px -5px rgba(0,0,0,.2),0 18px 28px 2px rgba(0,0,0,.14),0 7px 34px 6px rgba(0,0,0,.12);
  }
  & when (@level = 19) {
    box-shadow: 0 9px 12px -6px rgba(0,0,0,.2),0 19px 29px 2px rgba(0,0,0,.14),0 7px 36px 6px rgba(0,0,0,.12);
  }
  & when (@level = 20) {
    box-shadow: 0 10px 13px -6px rgba(0,0,0,.2),0 20px 31px 3px rgba(0,0,0,.14),0 8px 38px 7px rgba(0,0,0,.12);
  }
  & when (@level = 21) {
    box-shadow: 0 10px 13px -6px rgba(0,0,0,.2),0 21px 33px 3px rgba(0,0,0,.14),0 8px 40px 7px rgba(0,0,0,.12);
  }
  & when (@level = 22) {
    box-shadow: 0 10px 14px -6px rgba(0,0,0,.2),0 22px 35px 3px rgba(0,0,0,.14),0 8px 42px 7px rgba(0,0,0,.12);
  }
  & when (@level = 23) {
    box-shadow: 0 11px 14px -7px rgba(0,0,0,.2),0 23px 36px 3px rgba(0,0,0,.14),0 9px 44px 8px rgba(0,0,0,.12);
  }
  & when (@level = 24) {
    box-shadow: 0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);
  }
  // & when (@level = 1) {
  //   box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px;
  // }
  // & when (@level = 2) {
  //   box-shadow: rgba(0, 0, 0, 0.156863) 0px 3px 10px, rgba(0, 0, 0, 0.227451) 0px 3px 10px;
  // }
  // & when (@level = 3) {
  //   box-shadow: rgba(0, 0, 0, 0.188235) 0px 10px 30px, rgba(0, 0, 0, 0.227451) 0px 6px 10px;
  // }
  // & when (@level = 4) {
  //   box-shadow: rgba(0, 0, 0, 0.247059) 0px 14px 45px, rgba(0, 0, 0, 0.219608) 0px 10px 18px;
  // }
  // & when (@level = 5) {
  //   box-shadow: rgba(0, 0, 0, 0.298039) 0px 19px 60px, rgba(0, 0, 0, 0.219608) 0px 15px 20px;
  // }
}

// Highlighted Links
.active-highlight(@color:rgba(255, 255, 255, 0.15)){
  &:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: @color;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    opacity: 0;
    pointer-events: none;
    .transition(600ms);
  }
  &.active-state:before,
  html:not(.watch-active-state) &:active:before {
    opacity: 1;
    .transition(150ms);
  }
}
.active-highlight-color(@color) {
  &:before {
    background-image: -webkit-radial-gradient(center, circle cover, @color 66%, rgba(red(@color),green(@color),blue(@color),0) 66%);
    background-image: radial-gradient(circle at center, @color 66%, rgba(red(@color),green(@color),blue(@color),0) 66%);
  }
}
// No Scrollbar
.no-scrollbar() {
  &::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    opacity: 0 !important;
  }
}


.ellipsis() {
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  word-wrap: break-word;
}