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

.dropdown-container {
  @apply relative;
}

.dropdown {
  @apply hidden flex-col rounded p-2 md:absolute md:bg-slate-400 md:text-slate-800 md:shadow;
}

.dropdown-button {
  @apply w-full text-center;
}

.dropdown-button:is(.dropdown-open) ~ .dropdown {
  @apply flex;
}

.dropdown > a {
  @apply text-center md:text-left md:text-white text-slate-300 whitespace-nowrap rounded p-2;
}

.dropdown > a:hover {
  @apply bg-slate-700 md:bg-slate-200;
}

#nav-menu:is(.nav-open) {
  @apply flex;
}

.location-image {
  @apply aspect-square object-cover md:rounded-full w-full md:max-w-40;
}

.giveaway-step {
  @apply flex flex-col items-center prose;
}

.desc-text {
  text-shadow: 1px 1px 2px black;
  @apply text-twhite;
}

.form-field {
  @apply rounded-md border-slate-400 self-start;
}

.form-control:is(.form-validated) :is(input, textarea, select):invalid {
  @apply border-red-600 ring-red-600;
}

.form-error {
  @apply hidden text-red-600;
}

.form-control:is(.form-validated) :is(input, textarea, select):invalid + .form-error {
  @apply block;
}

input[type="submit"], input[type="reset"] {
  cursor: pointer;
}

.category-tag {
  @apply bg-tblue1 py-1 px-3 rounded-md no-underline font-bold;
}

.grid-item {
  @apply text-center border-slate-400;
}