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

@layer utilities {
  .image-pixelated {
    image-rendering: pixelated;
  }

  .size-xs {
    font-size: 11px;
  }

  .size-xs .size-container {
    width: 760px;
  }

  .size-sm {
    font-size: 14px;
  }

  .size-sm .size-container {
    width: 960px;
  }

  .size-base {
    font-size: 16px;
  }

  .size-base .size-container {
    width: 1024px;
  }

  .size-lg {
    font-size: 18px;
  }

  .size-lg .size-container {
    width: 1280px;
  }

  .text-contain {
    hyphens: auto;
    overflow-wrap: break-word;
    overflow: hidden;
    unicode-bidi: isolate;
  }
}

body {
  @apply bg-base-100 theme-dark:bg-base-200;
}

a,
.link {
  @apply text-primary-accent hover:underline;
}

.btn {
  @apply inline-flex px-2 border-2 cursor-pointer text-primary-content bg-primary-200 border-l-primary-100 border-t-primary-100 border-r-primary-300 border-b-primary-300 active:border-l-primary-300 active:border-t-primary-300 active:border-r-primary-100 active:border-b-primary-100 hover:text-primary-content hover:no-underline;
}

.mixed-copy h2 {
  @apply mt-6 mb-2 text-lg font-bold;
}

.mixed-copy p,
.mixed-copy ul {
  @apply mb-2;
}

.mixed-copy ul {
  @apply px-5 list-disc marker:text-primary-accent;
}

.emoticon-picker button,
.emoticon-picker button + button {
  @apply border-b border-r;
}

.actions {
  @apply border-b divide-y divide-primary-300 border-primary-300;
}

.actions li {
  @apply flex;
}

.action {
  @apply flex-grow flex-shrink-0 block px-1 text-left text-primary-accent hover:text-primary-content hover:bg-primary-200 hover:no-underline;
}

.action + .action {
  @apply flex-initial;
}

.message.success,
.message.info {
  @apply bg-success-200 text-success-content;
}

.message.error {
  @apply bg-error-200 text-error-content;
}
