@import "tailwindcss";

@theme {
  --color-primary: var(--color-purple-500);
  --color-primary-hover: var(--color-purple-700);

  --container-8xl: 96rem;
}

[data-theme="pink"] {
  --color-primary: var(--color-pink-500);
  --color-primary-hover: var(--color-pink-700);
}

[data-theme="blue"] {
  --color-primary: var(--color-blue-500);
  --color-primary-hover: var(--color-blue-700);
}

[data-theme="green"] {
  --color-primary: var(--color-green-500);
  --color-primary-hover: var(--color-green-700);
}

[data-theme="red"] {
  --color-primary: var(--color-red-500);
  --color-primary-hover: var(--color-red-700);
}

[data-theme="yellow"] {
  --color-primary: var(--color-yellow-500);
  --color-primary-hover: var(--color-yellow-700);
}

[data-theme="indigo"] {
  --color-primary: var(--color-indigo-500);
  --color-primary-hover: var(--color-indigo-700);
}

[data-theme="teal"] {
  --color-primary: var(--color-teal-500);
  --color-primary-hover: var(--color-teal-700);
}

[data-theme="purple"] {
  --color-primary: var(--color-purple-500);
  --color-primary-hover: var(--color-purple-700);
}

[data-theme="orange"] {
  --color-primary: var(--color-orange-500);
  --color-primary-hover: var(--color-orange-700);
}

h1 {
  @apply text-2xl font-semibold md:text-4xl text-neutral-200 mb-4;
}

h2 {
  @apply text-xl font-medium md:text-3xl text-neutral-200;
}

h3 {
  @apply text-2xl text-neutral-200;
}

h4 {
  @apply text-xl text-neutral-200 mb-1;
}

p {
  @apply text-base text-neutral-200;
}

div {
  @apply text-base text-neutral-200;
}

input[type="text"],
input[type="email"],
input[type="password"],
select {
  @apply block w-full px-3 py-2 border border-neutral-200 rounded-md shadow-sm dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200 focus:ring-primary focus:border-primary dark:focus:ring-primary dark:focus:border-primary outline-none;
}

input[type="checkbox"] {
  @apply w-6 h-6 text-primary bg-gray-100 border-gray-300 rounded focus:ring-primary dark:focus:ring-primary dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600;
}

textarea {
  @apply block w-full px-3 py-2 border border-neutral-200 rounded-md shadow-sm dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200 focus:ring-primary focus:border-primary dark:focus:ring-primary dark:focus:border-primary outline-none;
}

.btn-block {
  @apply cursor-pointer px-4 py-4 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary-hover transition ease-in-out duration-150 text-center w-full;

  text-align: center !important;
  justify-content: center !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.btn-outline {
  @apply cursor-pointer inline-flex items-center px-3 py-1.5 border border-primary/40 text-sm font-medium rounded-md text-primary bg-transparent hover:bg-primary-hover/60 hover:text-white transition ease-in-out duration-150;
}

.btn-outline-danger {
  @apply cursor-pointer inline-flex items-center px-3 py-1.5 border border-red-500/40 text-sm font-medium rounded-md text-red-500 bg-transparent hover:bg-red-700/60 hover:text-white transition ease-in-out duration-150;
}

.btn-rounded {
  @apply cursor-pointer inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-full text-white bg-primary hover:bg-primary-hover transition ease-in-out duration-150;
}

.btn {
  @apply cursor-pointer inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary-hover transition ease-in-out duration-150;

  &:focus {
    @apply outline-none border-primary ring-primary;
  }
}

.inset-form {
  @apply bg-neutral-800/80 border-neutral-700 p-6 rounded-lg;
}