@layer ui-reset, ui;

/* text */
@layer ui {
  :is(.text-xs, .text-sm, .text-base, .text-lg, .text-xl, .text-2xl, .text-3xl, .text-4xl, .text-5xl, .text-6xl, .text-7xl, .text-8xl, .text-9xl, .md\:text-xs, .md\:text-sm, .md\:text-base, .md\:text-lg, .md\:text-xl, .md\:text-2xl, .md\:text-3xl, .md\:text-4xl, .md\:text-5xl, .md\:text-6xl, .md\:text-7xl, .md\:text-8xl, .md\:text-9xl, .lg\:text-xs, .lg\:text-sm, .lg\:text-base, .lg\:text-lg, .lg\:text-xl, .lg\:text-2xl, .lg\:text-3xl, .lg\:text-4xl, .lg\:text-5xl, .lg\:text-6xl, .lg\:text-7xl, .lg\:text-8xl, .lg\:text-9xl) {
    font-size: var(--ui-text-size);
    line-height: var(--ui-text-leading);
  }

  .text-xs {
    --ui-text-size: var(--ui-text-xs);
    --ui-text-leading: calc(1 / .75);
  }

  .text-sm {
    --ui-text-size: var(--ui-text-sm);
    --ui-text-leading: calc(1.25 / .875);
  }

  .text-base {
    --ui-text-size: var(--ui-text-base);
    --ui-text-leading: 1.5;
  }

  .text-lg {
    --ui-text-size: var(--ui-text-lg);
    --ui-text-leading: calc(1.75 / 1.125);
  }

  .text-xl {
    --ui-text-size: var(--ui-text-xl);
    --ui-text-leading: calc(1.75 / 1.25);
  }

  .text-2xl {
    --ui-text-size: var(--ui-text-2xl);
    --ui-text-leading: calc(2 / 1.5);
  }

  .text-3xl {
    --ui-text-size: var(--ui-text-3xl);
    --ui-text-leading: 1.2;
  }

  .text-4xl {
    --ui-text-size: var(--ui-text-4xl);
    --ui-text-leading: calc(2.5 / 2.25);
  }

  .text-5xl {
    --ui-text-size: var(--ui-text-5xl);
    --ui-text-leading: 1;
  }

  .text-6xl {
    --ui-text-size: var(--ui-text-6xl);
    --ui-text-leading: 1;
  }

  .text-7xl {
    --ui-text-size: var(--ui-text-7xl);
    --ui-text-leading: 1;
  }

  .text-8xl {
    --ui-text-size: var(--ui-text-8xl);
    --ui-text-leading: 1;
  }

  .text-9xl {
    --ui-text-size: var(--ui-text-9xl);
    --ui-text-leading: 1;
  }

  @media (width >= 600px) {
    .md\:text-xs {
      --ui-text-size: var(--ui-text-xs);
      --ui-text-leading: calc(1 / .75);
    }

    .md\:text-sm {
      --ui-text-size: var(--ui-text-sm);
      --ui-text-leading: calc(1.25 / .875);
    }

    .md\:text-base {
      --ui-text-size: var(--ui-text-base);
      --ui-text-leading: 1.5;
    }

    .md\:text-lg {
      --ui-text-size: var(--ui-text-lg);
      --ui-text-leading: calc(1.75 / 1.125);
    }

    .md\:text-xl {
      --ui-text-size: var(--ui-text-xl);
      --ui-text-leading: calc(1.75 / 1.25);
    }

    .md\:text-2xl {
      --ui-text-size: var(--ui-text-2xl);
      --ui-text-leading: calc(2 / 1.5);
    }

    .md\:text-3xl {
      --ui-text-size: var(--ui-text-3xl);
      --ui-text-leading: 1.2;
    }

    .md\:text-4xl {
      --ui-text-size: var(--ui-text-4xl);
      --ui-text-leading: calc(2.5 / 2.25);
    }

    .md\:text-5xl {
      --ui-text-size: var(--ui-text-5xl);
      --ui-text-leading: 1;
    }

    .md\:text-6xl {
      --ui-text-size: var(--ui-text-6xl);
      --ui-text-leading: 1;
    }

    .md\:text-7xl {
      --ui-text-size: var(--ui-text-7xl);
      --ui-text-leading: 1;
    }

    .md\:text-8xl {
      --ui-text-size: var(--ui-text-8xl);
      --ui-text-leading: 1;
    }

    .md\:text-9xl {
      --ui-text-size: var(--ui-text-9xl);
      --ui-text-leading: 1;
    }
  }

  @media (width >= 1200px) {
    .lg\:text-xs {
      --ui-text-size: var(--ui-text-xs);
      --ui-text-leading: calc(1 / .75);
    }

    .lg\:text-sm {
      --ui-text-size: var(--ui-text-sm);
      --ui-text-leading: calc(1.25 / .875);
    }

    .lg\:text-base {
      --ui-text-size: var(--ui-text-base);
      --ui-text-leading: 1.5;
    }

    .lg\:text-lg {
      --ui-text-size: var(--ui-text-lg);
      --ui-text-leading: calc(1.75 / 1.125);
    }

    .lg\:text-xl {
      --ui-text-size: var(--ui-text-xl);
      --ui-text-leading: calc(1.75 / 1.25);
    }

    .lg\:text-2xl {
      --ui-text-size: var(--ui-text-2xl);
      --ui-text-leading: calc(2 / 1.5);
    }

    .lg\:text-3xl {
      --ui-text-size: var(--ui-text-3xl);
      --ui-text-leading: 1.2;
    }

    .lg\:text-4xl {
      --ui-text-size: var(--ui-text-4xl);
      --ui-text-leading: calc(2.5 / 2.25);
    }

    .lg\:text-5xl {
      --ui-text-size: var(--ui-text-5xl);
      --ui-text-leading: 1;
    }

    .lg\:text-6xl {
      --ui-text-size: var(--ui-text-6xl);
      --ui-text-leading: 1;
    }

    .lg\:text-7xl {
      --ui-text-size: var(--ui-text-7xl);
      --ui-text-leading: 1;
    }

    .lg\:text-8xl {
      --ui-text-size: var(--ui-text-8xl);
      --ui-text-leading: 1;
    }

    .lg\:text-9xl {
      --ui-text-size: var(--ui-text-9xl);
      --ui-text-leading: 1;
    }
  }
}