@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .text-mixed {
    text-orientation: mixed;
  }

  .writing-vertical-rl {
    writing-mode: vertical-rl;
  }

  .writing-vertical-lr {
    writing-mode: vertical-lr;
  }

  .writing-normal {
    writing-mode : horizontal-tb;
  }

  /* Responsive Variants */
  @media (min-width: 640px) {
    .sm\:text-mixed {
      text-orientation: mixed;
    }
    .sm\:writing-vertical-rl {
      writing-mode: vertical-rl;
    }
    .sm\:writing-vertical-lr {
      writing-mode: vertical-lr;
    }
    .sm\:writing-normal { 
        writing-mode: horizontal-tb; 
    }
  }

  @media (min-width: 1024px) {
    .lg\:text-mixed {
      text-orientation: mixed;
    }
    .lg\:writing-vertical-rl {
      writing-mode: vertical-rl;
    }
    .lg\:writing-vertical-lr {
      writing-mode: vertical-lr;
    }
    .lg\:writing-normal { 
        writing-mode: horizontal-tb; 
    }
  }
}