// get color ver css
getColor(colorx, alpha = 1)
    unquote("rgba(var(--vs-"+colorx+"), "+alpha+")")


getVar(var)
    unquote("var(--vs-"+var+")")

/**
* dirValue
* this mixin is for the properties that take "right" or "left" as value
* it will automatically create two classes:
* vuesax-app-is-rtl forwared with class in RTL case
* vuesax-app-is-ltr forwared with class in LTR case
* the value passed will be used in LTR case and the opposite will be assigned automatically
* for the RTL 
* example: 
  .someClass
    dirValue(float, left)

    [Compiled]

  .vuesax-app-is-rtl
    .someClass
      float: right

  .vuesax-app-is-ltr
    .someClass
      float: left
* 
*/
dirValue(prop, value)
  rtDir=right
  if value == right 
    rtDir=left
  .vuesax-app-is-rtl &
    {prop}: rtDir
  .vuesax-app-is-ltr &
    {prop}: value


/**
* propWithDir
* this mixin is for the properties that have direction like "margin-left" or "padding-left"
* as explained above it will automatically create two classes
* @params:
*   - prop ==> is the property name [eg: 'margin']
*   - dir  ==> is the direction of the property [eg: 'left' or 'right']
*   - value ==> is the value (value will be assigned to LTR class) [eg: '10px']
*   - otherValues ==> any others value you want to pass [eg: '!important',
         if the propery is transform you may pass some thing like 'rotate(20deg) skew(10deg)'
      ]
* if you want to use the mixin with transform, the mixin work with translate by default
* when using transform you should pass:
* transform as your first parameter
* null as your second parameter (since transform dose not take direction in its definiton)
* the value you want to pass in the third parameter, but you must pass it as array [eg: (10px 10px)]
* the mixin will convert the first value (x-asis) to negative [eg: (10px 10px) ==> (-10px 10px)]
* example using the mixin with transform:
  .someClass
    propWithDir(transform, null, (10px))

    [Compiled]

  .vuesax-app-is-rtl
    .someClass
      transform: translate(-10px, 10px)

  .vuesax-app-is-ltr
    .someClass
      transform: translate(10px, 10px)

* in case of using the mixin with justify-content
* a class with the opposite value will be assigned to RTL
* in case of using the mixin with right or left property
* a class with the oppoiste property will be assigned to RTL
* eg:
  .someClass
    propWithValue(right, null, 0px)

    [Compiled]
  
  .vuesax-app-is-rtl
    .someClass
      left: 0px

  .vuesax-app-is-ltr
    .someClass
      right: 0px

*/
propWithDir(prop, dir = null, value = null, otherValues = null)
  if prop == transform
    rtlTransDir = (0px 0px)
    rtlTransDir[1] = value[1] || rtlTransDir[1]
    rtlTransDir[0] = value[0] * -1
    .vuesax-app-is-rtl &
      transform: translate(rtlTransDir[0], rtlTransDir[1])  otherValues
    .vuesax-app-is-ltr &
      transform: translate(value[0], value[1] || rtlTransDir[1])  otherValues
  // justify-content case
  else if prop == justify-content
    rtlVal = ''
    if value == flex-start
      rtlVal = flex-end
    else 
      rtlVal = flex-start
    .vuesax-app-is-rtl & 
      justify-content: rtlVal otherValues
    .vuesax-app-is-ltr &
      justify-content: value otherValues

  // right or left properties case
  else if prop == right || prop == left 
    rtlProp = '' 
    if prop == right 
      rtlProp = left 
    else 
      rtlProp = right 
    .vuesax-app-is-rtl & 
      {rtlProp}: value otherValues
    .vuesax-app-is-ltr &
      {prop}: value otherValues

  // default case
  else 
    rtlDir=right 
    if dir == right
      rtlDir=left
    .vuesax-app-is-rtl &
      {prop}-{rtlDir}: value otherValues
    .vuesax-app-is-ltr &
      {prop}-{dir}: value otherValues