:dir(rtl) {
  font-family: Cairo, Roboto, 'sans-serif';
}

:dir(ltr) {
  direction: ltr;
}

[dir='ltr'] {
  direction: ltr;
}

[dir='rtl'] {
  direction: rtl;
  font-family: Cairo, Roboto, 'sans-serif';
  // Heading sizes
  .heading2 {
    font-size: $px22;
  }
  .subtitle1,
  .body1 {
    font-size: $px18;
  }
  .subtitle2,
  .body2,
  button {
    font-size: $px16;
  }
  caption {
    font-size: $px14;
  }
  .overline {
    font-size: $px12;
  }
}
