// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// Internationalization mixins


// Base left-to-right mixin definition.
@mixin LTR {
  [dir='ltr'] & {
    @content;
  }
}

// Base right-to-left mixin definition.
@mixin RTL {
  [dir='rtl'] & {
    @content;
  }
}

// Use baseRTL on a root element (e.g. page or region) that needs RTL support.
@mixin baseRtl {
  @include RTL {
    direction: rtl;
    unicode-bidi: bidi-override;
  }
}


// Common CSS property mixins with support for RTL.
// Use to automatically create RTL versions of your properties.

// Border styles.
@mixin border-color($top, $right, $bottom, $left) {
  border-color: $top $right $bottom $left;

  @include RTL {
    border-color: $top $left $bottom $right;
  }
}

@mixin border-left($width, $style, $color) {
  @include LTR {
    border-left: $width $style $color;
  }

  @include RTL {
    border-right: $width $style $color;
  }
}

@mixin border-left-color($color) {
  @include LTR {
    border-left-color: $color;
  }

  @include RTL {
    border-right-color: $color;
  }
}

@mixin border-left-style($style) {
  @include LTR {
    border-left-style: $style;
  }

  @include RTL {
    border-right-style: $style;
  }
}

@mixin border-left-width($width) {
  @include LTR {
    border-left-width: $width;
  }

  @include RTL {
    border-right-width: $width;
  }
}

@mixin border-radius($topLeft, $topRight, $bottomRight, $bottomLeft) {
  border-radius: $topLeft $topRight $bottomRight $bottomLeft;

  @include RTL {
    border-radius: $topRight $topLeft $bottomLeft $bottomRight;
  }
}

@mixin border-right($width, $style, $color) {
  @include LTR {
    border-right: $width $style $color;
  }

  @include RTL {
    border-left: $width $style $color;
  }
}

@mixin border-right-color($color) {
  @include LTR {
      border-right-color: $color;
  }

  @include RTL {
      border-left-color: $color;
  }
}

@mixin border-right-style($style) {
  @include LTR {
    border-right-style: $style;
  }
  
  @include RTL {
    border-left-style: $style;
  }
}

@mixin border-right-width($width) {
  @include LTR {
    border-right-width: $width;
  }

  @include RTL {
    border-left-width: $width;
  }
}

// Floats.
@mixin clear($side) {
  @if $side == left {
    @include LTR {
      clear: $side;
    }

    @include RTL {
      clear: right;
    }
  } @else if $side == right {
    @include LTR {
      clear: $side;
    }

    @include RTL {
      clear: left;
    }
  } @else {
      clear: $side;
  }
}

@mixin float($direction) {
  @if $direction == left {
    @include LTR {
      float: left;
    }

    @include RTL {
      float: right;
    }
  } @else {
    @include LTR {
      float: right;
    }

    @include RTL {
      float: left;
    }
  }
}

// Positioning.
@mixin left($distance) {
  @include LTR {
    left: $distance;
  }

  @include RTL {
    right: $distance;
  }
}

@mixin right($distance) {
  @include LTR {
    right: $distance;
  }

  @include RTL {
    left: $distance;
  }
}

// Margins.
@mixin margin($top, $right, $bottom, $left) {
  margin: $top $right $bottom $left;

  @include RTL {
    margin: $top $left $bottom $right;
  }
}

@mixin margin-left($distance) {
  @include LTR {
    margin-left: $distance;
  }

  @include RTL {
    margin-right: $distance;
  }
}

@mixin margin-right($distance) {
  @include LTR {
    margin-right: $distance;
  }
  @include RTL {
    margin-left: $distance;
  }
}

// Padding.
@mixin padding($top, $right, $bottom, $left) {
  padding: $top $right $bottom $left;

  @include RTL {
    padding: $top $left $bottom $right;
  }
}

@mixin padding-left($distance) {
  @include LTR {
    padding-left: $distance;
  }

  @include RTL {
    padding-right: $distance;
  }
}

@mixin padding-right($distance) {
  @include LTR {
    padding-right: $distance;
  }

  @include RTL {
    padding-left: $distance;
  }
}

// Text-alignment.
@mixin text-align($direction) {
  @if $direction == left {
    @include LTR {
      text-align: left;
    }

    @include RTL {
      text-align: right;
    }
  } @else {
    @include LTR {
      text-align: right;
    }

    @include RTL {
      text-align: left;
    }
  }
}

// Box-shadow.
@mixin box-shadow($left, $etc) {
  @include LTR {
    box-shadow: $left $etc;
  }

  @include RTL {
    box-shadow: -$left $etc;
  }
}

// Transforms.
@mixin transform-rtl() {
  @include LTR {
    transform: scaleX(1);
  }

  @include RTL {
    transform: scaleX(-1);
  }
}

// Transitions. Only supported when ONLY left/right are declared
@mixin transition-property($direction) {
  @if $direction == left {
    @include LTR {
      transition-property: left;
    }

    @include RTL {
      transition-property: right;
    }
  } @else {
    @include LTR {
      transition-property: right;
    }

    @include RTL {
      transition-property: left;
    }
  }
}