:dir(rtl) {
    font-family: Cairo-ExtraLight, Cairo, Roboto, 'sans-serif';
  }
  
  :dir(ltr) {
    direction: ltr;
  }
  
  [dir='ltr'] {
    direction: ltr;
  }
  
  [dir='rtl'] {
    direction: rtl;
    font-family: Cairo-ExtraLight, Cairo, Roboto, 'sans-serif';
    // Heading sizes
    .heading2 {
      @include sizePxToRemProperty(font-size, 22px);
    }
    .subtitle1,
    .body1 {
      @include sizePxToRemProperty(font-size, 18px);
    }
    .subtitle2,
    .body2,
    button {
      @include sizePxToRemProperty(font-size, 16px);
    }
    caption {
      @include sizePxToRemProperty(font-size, 14px);
    }
    .overline {
      @include sizePxToRemProperty(font-size, 12px);
    }
  }