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

/* Custom styles */

@layer components {
    span.active {
      background-color: #ffe6e6;
    }

    .translation-wrapper {
      display: grid;
      grid-template-rows: 0fr;
      opacity: 0;
      transition: grid-template-rows 300ms ease, opacity 200ms ease;
    }

    .translation-wrapper.is-visible {
      grid-template-rows: 1fr;
      opacity: 1;
    }

    .translation-wrapper > * {
      overflow: hidden;
    }
}