/* ==========================================================================
 *
 * BreezeLess
 *
 * A less css library.
 *
 * --------------------------------------------------------------------------
 *
 * Released under the MIT Licence
 * https://github.com/ccpalettes/breezeless/blob/master/LICENSE
 *
 * ========================================================================== */

/**
 * Border.
 *
 * @DESCRIPTION
 * Set border style property of an element.
 * A complete border style consists three properties, they are width, style and color.
 *
 * @USAGE
 * - When the length of arguments is less than or equral to 3, same style will be applied to all
 *   four borders. You can pass border width, border style and border color into the arguments
 *   individually, or passed a single value list combined of them to the mixin. The values of width
 *   style and color are optional, the mixin will apply a default value if you leave any of them
 *   empty.
 *
 *   + @EXAMPLE
 *   - .bl-border(2px);
 *   - .bl-border(dashed);
 *   - .bl-border(2px; #999);
 *   - .bl-border(yellow 2px);
 *   - .bl-border(0 dashed #A87);
 *   - .bl-border(solid; 3px; #666);
 *
 * - When the length of arguments is 4, the four arguments represent top border, right border,
 *   bottom border and left border respectively, each argument is a value list which may consists
 *   border width, border style and border color. If one argument's value is set to null, then no
 *   style will be applied to the relevant border.
 *
 *   + @EXAMPLE
 *   - .bl-border(6px; 3px; 1px; 2px);
 *   - .bl-border(solid #FFF000; null; 3px dashed; 2px dotted #909090);
 *
 * - Default values. By default, border width is set to 1px, border style is set to solid, and
 *   border color is set to #000.
 *
 *   + @EXAMPLE
 *   - .bl-border(2px) is equivalent to .bl-border(2px solid #000)
 *   - .bl-border(6px; #FF0; dashed; blue) is equivalent to
 *     .bl-border(6px solid #000; 1px solid #FF0; 1px dashed #000; 1px solid blue)
 *
 * @REFERENCE
 * - https://developer.mozilla.org/en-US/docs/Web/CSS/border
 */

// .bl-border(2px; dotted; #847299); .bl-border(solid; 3px; #666);
.bl-border (@border-width; @border-style; @border-color) when not (@border-width=_DIRECTION_ROUTE_) and not (@border-width=_DIRECTION_) {
  border: @border-width @border-style @border-color;
}

// .bl-border(2px);
.bl-border (@border-width) when (isnumber(@border-width)) {
  .bl-border(@border-width; solid; #000);
}

// .bl-border(dashed);
.bl-border (@border-style) when (iskeyword(@border-style)) {
  .bl-border(1px; @border-style; #000);
}

// .bl-border(#F00); .bl-border(blue);
.bl-border (@border-color) when (iscolor(@border-color)) {
  .bl-border(1px; solid; @border-color);
}

//.bl-border(2px; dotted);
.bl-border (@border-width; @border-style) when (isnumber(@border-width)) and (iskeyword(@border-style)) {
  .bl-border(@border-width; @border-style; #000);
}

// .bl-border(solid; 3px);
.bl-border (@border-style; @border-width) when (isnumber(@border-width)) and (iskeyword(@border-style)) {
  .bl-border(@border-width; @border-style; #000);
}

// .bl-border(2px; #999);
.bl-border (@border-width; @border-color) when (isnumber(@border-width)) and (iscolor(@border-color)) {
  .bl-border(@border-width; solid; @border-color);
}

// .bl-border(green; 1px);
.bl-border (@border-color; @border-width) when (isnumber(@border-width)) and (iscolor(@border-color)) {
  .bl-border(@border-width; solid; @border-color);
}

// .bl-border(solid; #0F0);
.bl-border (@border-style; @border-color) when (iskeyword(@border-style)) and (iscolor(@border-color)) {
  .bl-border(1px; @border-style; @border-color);
}

// .bl-border(#A2B109; dashed);
.bl-border (@border-color; @border-style) when (iskeyword(@border-style)) and (iscolor(@border-color)) {
  .bl-border(1px; @border-style; @border-color);
}

// .bl-border(6px dotted); .bl-border(yellow 2px); .bl-border(none, #222;);
.bl-border (@border-style-list) when (length(@border-style-list) = 2) {
  .bl-border(extract(@border-style-list, 1); extract(@border-style-list, 2));
}

// .bl-border(0 dashed #A87); .bl-border(#BBB solid 9px);
.bl-border (@border-style-list) when (length(@border-style-list) = 3) {
  .bl-border(extract(@border-style-list, 1); extract(@border-style-list, 2); extract(@border-style-list, 3));
}

// .bl-border(6px; 3px; 1px; 2px); .bl-border(#FFF000 solid; null; 3px, dashed; 0 dotted #909090);
.bl-border (@top-border-style-list; @right-border-style-list; @bottom-border-style-list; @left-border-style-list) when not (@top-border-style-list=_DIRECTION_) {
  .bl-border(_DIRECTION_ROUTE_; top; @top-border-style-list);
  .bl-border(_DIRECTION_ROUTE_; right; @right-border-style-list);
  .bl-border(_DIRECTION_ROUTE_; bottom; @bottom-border-style-list);
  .bl-border(_DIRECTION_ROUTE_; left; @left-border-style-list);
}

.bl-border (_DIRECTION_ROUTE_; @border-direction; @border-style-list) when not (@border-style-list = null) and (length(@border-style-list) = 1) {
  .bl-border(_DIRECTION_; @border-direction; @border-style-list);
}

.bl-border (_DIRECTION_ROUTE_; @border-direction; @border-style-list) when (length(@border-style-list) = 2) {
  .bl-border(_DIRECTION_; @border-direction; extract(@border-style-list, 1); extract(@border-style-list, 2));
}

.bl-border (_DIRECTION_ROUTE_; @border-direction; @border-style-list) when (length(@border-style-list) = 3) {
  .bl-border(_DIRECTION_; @border-direction; extract(@border-style-list, 1); extract(@border-style-list, 2); extract(@border-style-list, 3));
}

.bl-border (_DIRECTION_; @border-direction; @border-width) when (isnumber(@border-width)) {
  .bl-border(_DIRECTION_; @border-direction; @border-width; solid; #000);
}

.bl-border (_DIRECTION_; @border-direction; @border-style) when (iskeyword(@border-style)) {
  .bl-border(_DIRECTION_; @border-direction; 1px; @border-style; #000);
}

.bl-border (_DIRECTION_; @border-direction; @border-color) when (iscolor(@border-color)) {
  .bl-border(_DIRECTION_; @border-direction; 1px; solid; @border-color);
}

.bl-border (_DIRECTION_; @border-direction; @border-width; @border-style) when (isnumber(@border-width)) and (iskeyword(@border-style)) {
  .bl-border(_DIRECTION_; @border-direction; @border-width; @border-style; #000);
}

.bl-border (_DIRECTION_; @border-direction; @border-style; @border-width) when (isnumber(@border-width)) and (iskeyword(@border-style)) {
  .bl-border(_DIRECTION_; @border-direction; @border-width; @border-style; #000);
}

.bl-border (_DIRECTION_; @border-direction; @border-width; @border-color) when (isnumber(@border-width)) and (iscolor(@border-color)) {
  .bl-border(_DIRECTION_; @border-direction; @border-width; solid; @border-color);
}

.bl-border (_DIRECTION_; @border-direction; @border-color; @border-width) when (isnumber(@border-width)) and (iscolor(@border-color)) {
  .bl-border(_DIRECTION_; @border-direction; @border-width; solid; @border-color);
}

.bl-border (_DIRECTION_; @border-direction; @border-style; @border-color) when (iskeyword(@border-style)) and (iscolor(@border-color)) {
  .bl-border(_DIRECTION_; @border-direction; 1px; @border-style; @border-color);
}

.bl-border (_DIRECTION_; @border-direction; @border-color; @border-style) when (iskeyword(@border-style)) and (iscolor(@border-color)) {
  .bl-border(_DIRECTION_; @border-direction; 1px; @border-style; @border-color);
}

.bl-border (_DIRECTION_; @border-direction; @border-width; @border-style; @border-color) {
  border-@{border-direction}: @border-width @border-style @border-color;
}

/**
 * inline-block display fix.
 *
 * @DESCRIPTION
 * Fix to support inline-block display for IE6 and IE7.
 *
 * @EXAMPLE
 * - .bl-inline-block-fix();
 */
.bl-inline-block-fix () {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

/**
 * box-sizing
 *
 * @ARGUMENTS
 * - @value [border-box]
 *
 * @EXAMPLE
 * - .bl-box-sizing();
 * - .bl-box-sizing(border-box);
 *
 * @REFERENCE
 * - https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
 */
.bl-box-sizing (@value: border-box) {
  -webkit-box-sizing: @value;
  -moz-box-sizing: @value;
  box-sizing: @value;
}

/**
 * user-select
 *
 * @ARGUMENTS
 * - @value [none]
 *
 * @EXAMPLE
 * - .bl-user-select();
 * - .bl-user-select(text);
 *
 * @REFERENCE
 * - https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
 */
.bl-user-select (@value: none) {
  -webkit-user-select: @value;
  -moz-user-select: @value;
  -ms-user-select: @value;
  user-select: @value;
}

/**
 * clearfix
 *
 * @DESCRIPTION
 * CLear an element itself which contains floated children.
 *
 * @EXAMPLE
 * - .bl-clearfix();
 *
 * @REFERENCE
 * - http://nicolasgallagher.com/micro-clearfix-hack/
 */

.bl-clearfix () {
  &:before, &:after {
    content: " ";
    display: table;
  }

  &:after {
    clear: both;
  }

  *zoom: 1;
}

/**
 * box-shadow
 *
 * @DESCRIPTION
 * Set single or multiple shadows to one element.
 *
 * @ARGUMENTS
 * - @value {...}
 *
 * @EXAMPLE
 * - single shadow, .bl-box-shadow(3px 3px 6px 2px rgba(0, 0, 0, 0.2));
 * - multiple shadows, .bl-box-shadow(1px 1px 2px 0 #F00; inset -1px -1px 2px 0 #00F);
 *
 * @REFERENCE
 * - https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
 */

// single shadow, .bl-box-shadow(3px 3px 6px 2px rgba(0, 0, 0, 0.2));
.bl-box-shadow (@shadow) {
  -webkit-box-shadow: @shadow;
  -moz-box-shadow: @shadow;
  box-shadow: @shadow;
}

// multiple shadows, .bl-box-shadow(1px 1px 2px 0 #F00; inset -1px -1px 2px 0 #00F);
.bl-box-shadow (@shadow1; @shadow2; ...) {
  @shadow-list: replace(~`"@{arguments}"`,"[\[\]]", "", "g");
  -webkit-box-shadow: @shadow-list;
  -moz-box-shadow: @shadow-list;
  box-shadow: @shadow-list;
}

/**
 * border-radius
 *
 * @EXAMPLE
 * - .bl-border-radius(e("60px 20px / 30px"));
 * - .bl-border-radius(10px);
 *
 * @REFERENCE
 * - https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
 */
.bl-border-radius (@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

/**
 * opacity
 *
 * @DESCRIPTION
 * Set opacity of an element, support IE6 and above.
 *
 * @ARGUMENTS
 * - @opacity {number}
 * - @opacity {percentage}
 *
 * @USAGE
 * - You can pass a number to the opacity argument.
 *   + @EXAMPLE
 *   - .bl-opacity(0.5);
 *
 * - A percentage number is also valid.
 *   + @EXAMPLE
 *   - .bl-opacity(30%);
 *
 * @REFERENCE
 * - https://developer.mozilla.org/en-US/docs/Web/CSS/opacity
 */

// .bl-opacity(0.5);
.bl-opacity (@opacity) when (isnumber(@opacity)) and not (ispercentage(@opacity)) {
  @ms-opacity: @opacity * 100;

  // IE 8
  -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=@{ms-opacity})";

  // IE 6-7
  filter: ~"alpha(opacity=@{ms-opacity})";

  opacity: @opacity;
}

// .bl-opacity(30%);
.bl-opacity (@opacity) when (ispercentage(@opacity)) {
  .bl-opacity(unit(@opacity) / 100);
}

/**
 * transition
 *
 * @DESCRIPTION
 * Set single or multiple transitions to one element.
 *
 * @GROUP=BL-TRANSITION
 *
 * @ARGUMENTS
 * - @value {...}
 *
 * @USAGE
 * - BreezeLess defined five transition mixins, one mixin is used to set the shorthand transition
 *   property, and the other four are used to set specific transition CSS property. Each mixin
 *   accept one or more arguments.
 *
 * - When you need to pass "transform" as the transition-property value, you don't need to add
 *   vendor-prefixes before "transform", BreezeLess will do it for you.
 *
 * - bl-transition. Set the shorthand transition property.
 *   + @EXAMPLE
 *   - .bl-transition(transform 1s);
 *   - .bl-transition(width 2s; height 2s);
 *
 * - bl-transition-property. Set transition-property property.
 *   + @EXAMPLE
 *   - .bl-transition-property(top);
 *   - .bl-transition-property(transform; color);
 *
 * - bl-transition-duration. Set transition-duration property.
 *   + @EXAMPLE
 *   - .bl-transition-duration(1s);
 *   - .bl-transition-duration(1s; 2s);
 *
 * - bl-transition-timing-function. Set transition-timing-function property.
 *   + @EXAMPLE
 *   - .bl-transition-timing-function(ease);
 *   - .bl-transition-timing-function(ease-in; ease-out);
 *
 * - bl-transition-delay. Set transition-delay property.
 *   + @EXAMPLE
 *   - .bl-transition-delay(1s);
 *   - .bl-transition-delay(1s; 2s);
 *
 * @REFERENCE
 * - https://developer.mozilla.org/en-US/docs/Web/CSS/transition
 */

// single transition, .bl-transition(width 2s); .bl-transition(transform 1s);
.bl-transition (@transition) {
  @-webkit-transition: replace(~"@{transition}", "transform", "-webkit-transform");
  @-moz-transition: replace(~"@{transition}", "transform", "-moz-transform");
  @-o-transition: replace(~"@{transition}", "transform", "-o-transform");
  @merged-transition: replace(~"@{transition}", "(^.*)(transform)(.*$)", "$1$2$3,$1-webkit-$2$3");

  -webkit-transition: @-webkit-transition;
  -moz-transition: @-moz-transition;
  -o-transition: @-o-transition;
  transition: @merged-transition;
}

// multiple transitions, .bl-transition(width 2s; height 2s); .bl-transition(transform 2s; width 1s);
.bl-transition (@transition1; @transition2; ...) {
  @transition-list: replace(~`"@{arguments}"`,"[\[\]]", "", "g");
  @-webkit-transition-list: replace(~"@{transition-list}", "transform", "-webkit-transform");
  @-moz-transition-list: replace(~"@{transition-list}", "transform", "-moz-transform");
  @-o-transition-list: replace(~"@{transition-list}", "transform", "-o-transform");
  @merged-transition-list: replace(~"@{transition-list}", "(^.*,|^)((.*?)(transform)(.*?))(,.*|$)", "$1$2,$3-webkit-$4$5$6");

  -webkit-transition: @transition-list;
  -moz-transition: @transition-list;
  -o-transition: @transition-list;
  transition: @merged-transition-list;
}

// .bl-transition-property(top); .bl-transition-property(transform);
.bl-transition-property (@property) {
  @-webkit-property: replace(~"@{property}", "transform", "-webkit-transform");
  @-moz-property: replace(~"@{property}", "transform", "-moz-transform");
  @-o-property: replace(~"@{property}", "transform", "-o-transform");
  @merged-property: replace(~"@{property}", "transform", "transform,-webkit-transform");

  -webkit-transition-property: @-webkit-property;
  -moz-transition-property: @-moz-property;
  -o-transition-property: @-o-property;
  transition-property: @merged-property;
}

// .bl-transition-property(width, height); .bl-transition-property(transform; color);
.bl-transition-property (@property1; @property2; ...) {
  @property-list: replace(~`"@{arguments}"`,"[\[\]]", "", "g");
  @-webkit-property-list: replace(~"@{property-list}", "transform", "-webkit-transform");
  @-moz-property-list: replace(~"@{property-list}", "transform", "-moz-transform");
  @-o-property-list: replace(~"@{property-list}", "transform", "-o-transform");
  @merged-property-list: replace(~"@{property-list}", "transform", "transform,-webkit-transform");

  -webkit-transition-property: @property-list;
  -moz-transition-property: @property-list;
  -o-transition-property: @property-list;
  transition-property: @merged-property-list;
}

// .bl-transition-duration(1s);
.bl-transition-duration (@duration) {
  -webkit-transition-duration: @duration;
  -moz-transition-duration: @duration;
  -o-transition-duration: @duration;
  transition-duration: @duration;
}

// .bl-transition-duration(1s; 2s);
.bl-transition-duration (@duration1; @duration2; ...) {
  @duration-list: replace(~`"@{arguments}"`,"[\[\]]", "", "g");

  -webkit-transition-duration: @duration-list;
  -moz-transition-duration: @duration-list;
  -o-transition-duration: @duration-list;
  transition-duration: @duration-list;
}

// .bl-transition-timing-function(ease);
.bl-transition-timing-function (@timing-function) {
  -webkit-transition-timing-function: @timing-function;
  -moz-transition-timing-function: @timing-function;
  -o-transition-timing-function: @timing-function;
  transition-timing-function: @timing-function;
}

// .bl-transition-timing-function(ease-in; ease-out);
.bl-transition-timing-function (@timing-function1; @timing-function2; ...) {
  @timing-function-list: replace(~`"@{arguments}"`,"[\[\]]", "", "g");

  -webkit-transition-timing-function: @timing-function-list;
  -moz-transition-timing-function: @timing-function-list;
  -o-transition-timing-function: @timing-function-list;
  transition-timing-function: @timing-function-list;
}

// .bl-transition-delay(1s);
.bl-transition-delay (@delay) {
  -webkit-transition-delay: @delay;
  -moz-transition-delay: @delay;
  -o-transition-delay: @delay;
  transition-delay: @delay;
}

// .bl-transition-delay(1s; 2s);
.bl-transition-delay (@delay1; @delay2; ...) {
  @delay-list: replace(~`"@{arguments}"`,"[\[\]]", "", "g");

  -webkit-transition-delay: @delay-list;
  -moz-transition-delay: @delay-list;
  -o-transition-delay: @delay-list;
  transition-delay: @delay-list;
}

/**
 * animation
 *
 * @DESCRIPTION
 * Set single or multiple animations to one element.
 *
 * @GROUP=BL-ANIMATION
 *
 * @ARGUMENTS
 * - @value {...}
 *
 * @USAGE
 * - BreezeLess defined nine transition mixins, one mixin is used to set the shorthand animation
 *   property, and the other eight mixins are used to set specific animation CSS property. Each
 *   mixin accept one or more arguments.
 *
 * - bl-animation. Set the shorthand animation property.
 *   + @EXAMPLE
 *   - .bl-animation(swing 3s ease 1s 2 alternate both running);
 *   - .bl-animation(bounce 5s; rotate 2s);
 *
 * - bl-animation-name. Set animation-name property.
 *   + @EXAMPLE
 *   - .bl-animation-name(swing);
 *   - .bl-animation-name(bounce; rotate);
 *
 * - bl-animation-duration. Set animation-duration property.
 *   + @EXAMPLE
 *   - .bl-animation-duration(1s);
 *   - .bl-animation-duration(3s; 5s);
 *
 * - bl-animation-timing-function. Set animation-timing-function property.
 *   + @EXAMPLE
 *   - .bl-animation-timing-function(ease);
 *   - .bl-animation-timing-function(ease-in; ease-out);
 *
 * - bl-animation-delay. Set animation-delay property.
 *   + @EXAMPLE
 *   - .bl-animation-delay(2s);
 *   - .bl-animation-delay(0s; 3s);
 *
 * - bl-animation-iteration-count. Set animation-iteration-count property.
 *   + @EXAMPLE
 *   - .bl-animation-iteration-count(6);
 *   - .bl-animation-iteration-count(2; infinite);
 *
 * - bl-animation-direction. Set animation-direction property.
 *   + @EXAMPLE
 *   - .bl-animation-direction(normal);
 *   - .bl-animation-direction(alternate; reverse; alternate-reverse);
 *
 * - bl-animation-fill-mode. Set animation-fill-mode property.
 *   + @EXAMPLE
 *   - .bl-animation-fill-mode(none);
 *   - .bl-animation-fill-mode(forwards; backwards; both);
 *
 * - bl-animation-play-state. Set animation-play-state property.
 *   + @EXAMPLE
 *   - .bl-animation-play-state(paused);
 *   - .bl-animation-play-state(paused; running);
 *
 * @REFERENCE
 * - https://developer.mozilla.org/en-US/docs/Web/CSS/animation
 */

// .bl-animation(swing 3s ease 1s 2 alternate both running);
.bl-animation (@animation) {
  -webkit-animation: @animation;
  -moz-animation: @animation;
  animation: @animation;
}

// multiple animations, .bl-animation(bounce 5s; rotate 2s);
.bl-animation (@animation1; @animation2; ...) {
  @animation-list: replace(~`"@{arguments}"`,"[\[\]]", "", "g");

  -webkit-animation: @animation-list;
  -moz-animation: @animation-list;
  animation: @animation-list;
}

// .bl-animation-name(swing);
.bl-animation-name (@name) {
  -webkit-animation-name: @name;
  -moz-animation-name: @name;
  animation-name: @name;
}

// .bl-animation-name(bounce; rotate);
.bl-animation-name (@name1; @name2; ...) {
  @name-list: replace(~`"@{arguments}"`,"[\[\]]", "", "g");

  -webkit-animation-name: @name-list;
  -moz-animation-name: @name-list;
  animation-name: @name-list;
}

// .bl-animation-duration(1s);
.bl-animation-duration (@duration) {
  -webkit-animation-duration: @duration;
  -moz-animation-duration: @duration;
  animation-duration: @duration;
}

// .bl-animation-duration(3s; 5s);
.bl-animation-duration (@duration1; @duration2; ...) {
  @duration-list: replace(~`"@{arguments}"`,"[\[\]]", "", "g");

  -webkit-animation-duration: @duration-list;
  -moz-animation-duration: @duration-list;
  animation-duration: @duration-list;
}

// .bl-animation-timing-function(ease);
.bl-animation-timing-function (@timing-function) {
  -webkit-animation-timing-function: @timing-function;
  -moz-animation-timing-function: @timing-function;
  animation-timing-function: @timing-function;
}

// .bl-animation-timing-function(ease-in; ease-out);
.bl-animation-timing-function (@timing-function1; @timing-function2; ...) {
  @timing-function-list: replace(~`"@{arguments}"`,"[\[\]]", "", "g");

  -webkit-animation-timing-function: @timing-function-list;
  -moz-animation-timing-function: @timing-function-list;
  animation-timing-function: @timing-function-list;
}

// .bl-animation-delay(2s);
.bl-animation-delay (@delay) {
  -webkit-animation-delay: @delay;
  -moz-animation-delay: @delay;
  animation-delay: @delay;
}

// .bl-animation-delay(0s; 3s);
.bl-animation-delay (@delay1; @delay2; ...) {
  @delay-list: replace(~`"@{arguments}"`,"[\[\]]", "", "g");

  -webkit-animation-delay: @delay-list;
  -moz-animation-delay: @delay-list;
  animation-delay: @delay-list;
}

// .bl-animation-iteration-count(6);
.bl-animation-iteration-count (@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
  -moz-animation-iteration-count: @iteration-count;
  animation-iteration-count: @iteration-count;
}

// .bl-animation-iteration-count(2; infinite);
.bl-animation-iteration-count (@iteration-count1; @iteration-count2; ...) {
  @iteration-count-list: replace(~`"@{arguments}"`,"[\[\]]", "", "g");

  -webkit-animation-iteration-count: @iteration-count-list;
  -moz-animation-iteration-count: @iteration-count-list;
  animation-iteration-count: @iteration-count-list;
}

// .bl-animation-direction(normal);
.bl-animation-direction (@direction) {
  -webkit-animation-direction: @direction;
  -moz-animation-direction: @direction;
  animation-direction: @direction;
}

// .bl-animation-direction(alternate; reverse; alternate-reverse);
.bl-animation-direction (@direction1; @direction2; ...) {
  @direction-list: replace(~`"@{arguments}"`,"[\[\]]", "", "g");

  -webkit-animation-direction: @direction-list;
  -moz-animation-direction: @direction-list;
  animation-direction: @direction-list;
}

// .bl-animation-fill-mode(none);
.bl-animation-fill-mode (@fill-mode) {
  -webkit-animation-fill-mode: @fill-mode;
  -moz-animation-fill-mode: @fill-mode;
  animation-fill-mode: @fill-mode;
}

// .bl-animation-fill-mode(forwards; backwards; both);
.bl-animation-fill-mode (@fill-mode1; @fill-mode2; ...) {
  @fill-mode-list: replace(~`"@{arguments}"`,"[\[\]]", "", "g");

  -webkit-animation-fill-mode: @fill-mode-list;
  -moz-animation-fill-mode: @fill-mode-list;
  animation-fill-mode: @fill-mode-list;
}

// .bl-animation-play-state(paused);
.bl-animation-play-state (@play-state) {
  -webkit-animation-play-state: @play-state;
  -moz-animation-play-state: @play-state;
  animation-play-state: @play-state;
}

// .bl-animation-play-state(paused; running);
.bl-animation-play-state (@play-state1; @play-state2; ...) {
  @play-state-list: replace(~`"@{arguments}"`,"[\[\]]", "", "g");

  -webkit-animation-play-state: @play-state-list;
  -moz-animation-play-state: @play-state-list;
  animation-play-state: @play-state-list;
}

/**
 * ellipsis
 *
 * @DESCRIPTION
 * Display an ellipsis ('…', U+2026 HORIZONTAL ELLIPSIS) for a clipped text.
 *
 * @EXAMPLE
 * - .bl-ellipsis();
 *
 * @REFERENCE
 * - https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
 */
.bl-ellipsis () {
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

/**
 * transform
 *
 * @DESCRIPTION
 * Set transform related CSS properties.
 *
 * @GROUP=BL-TRANSFORM
 *
 * @ARGUMENTS
 * - @value {...}
 *
 * @USAGE
 * - bl-transform. Set the shorthand transform property.
 *   + @EXAMPLE
 *   - .bl-transform(rotateX(60deg));
 *
 * - bl-transform-origin. Set transform-origin property.
 *   + @EXAMPLE
 *   - .bl-transform-origin(50px 100px);
 *
 * - bl-transform-style. Set transform-style property.
 *   + @EXAMPLE
 *   - .bl-transform-style(preserve-3d);
 *
 * - bl-perspective. Set perspective property.
 *   + @EXAMPLE
 *   - .bl-perspective(20px);
 *
 * - bl-perspective-origin. Set perspective-origin property.
 *   + @EXAMPLE
 *   - .bl-perspective-origin(0 50%);
 *
 * - bl-backface-visibility. Set backface-visibility property.
 *   + @EXAMPLE
 *   - .bl-backface-visibility(hidden);
 *
 * @REFERENCE
 * - https://developer.mozilla.org/en-US/docs/Web/CSS/transform
 * - https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
 * - https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style
 * - https://developer.mozilla.org/en-US/docs/Web/CSS/perspective
 * - https://developer.mozilla.org/en-US/docs/Web/CSS/perspective-origin
 * - https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility
 */

// .bl-transform(rotateX(60deg));
.bl-transform (...) {
  -webkit-transform: @arguments;
  -moz-transform: @arguments;
  -ms-transform: @arguments;
  transform: @arguments;
}

// .bl-transform-origin(50px 100px);
.bl-transform-origin (...) {
  -webkit-transform-origin: @arguments;
  -moz-transform-origin: @arguments;
  -ms-transform-origin: @arguments;
  transform-origin: @arguments;
}

// .bl-transform-style(preserve-3d);
.bl-transform-style (@style: flat) {
  -webkit-transform-style: @style;
  -moz-transform-style: @style;
  transform-style: @style;
}

// .bl-perspective(20px);
.bl-perspective (@perspective: none) {
  -webkit-perspective: @perspective;
  -moz-perspective: @perspective;
  perspective: @perspective;
}

// .bl-perspective-origin(0 50%);
.bl-perspective-origin (...) {
  -webkit-perspective-origin: @arguments;
  -moz-perspective-origin: @arguments;
  perspective-origin: @arguments;
}

// .bl-backface-visibility(hidden);
.bl-backface-visibility (@backface-visibility: visible) {
  -webkit-backface-visibility: @backface-visibility;
  -moz-backface-visibility: @backface-visibility;
  backface-visibility: @backface-visibility;
}