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

@layer base {
  html,
  body {
    @apply !overflow-x-hidden;
  }

  body {
    padding-top: 5.45rem;
  }

  .button_to {
    @apply flex;
  }

  abbr[title="required"] {
    @apply text-red-500;
  }

  pre {
    @apply whitespace-pre-wrap break-words bg-gray-100 p-2 rounded text-sm;
  }
}

@layer utilities {
  .bg-signin {
    background: radial-gradient(
      circle at top left,
      theme(colors.primary.900) 30%,
      rgba(251, 253, 255, 0) 120%
    );
  }

  input[type="checkbox"] {
    @apply appearance-none relative block text-center w-4 h-4 rounded border border-slate-900 checked:bg-primary-900 checked:border-primary-900;
    &:checked::after {
      @apply absolute inline-block w-2 h-5 top-0 left-0 right-0 bottom-0 m-auto text-white font-bold;
      content: "✓";
    }
  }
}