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

button:disabled {
  opacity: 0.64;
  cursor: not-allowed;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2372716D' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 15px center;
  background-repeat: no-repeat;
  background-size: 15px 9px;
}

/* Page section */
.section-title {
  @apply text-6xl text-gray-800 mb-2 font-bold tracking-tight;
}
.section-subtitle {
  @apply text-xl;
}

/* Tabish style links */
.tabs {
  @apply flex border-b border-gray-300;
}
.tab-item {
  @apply text-xl py-2 px-6;
}
.tab-item.active {
  @apply text-gray-800 font-medium border-b-2 border-gray-800;
}

/* Header menu dropdown */
.dropdown {
  @apply bg-white shadow-spread absolute right-0 py-2 -mr-4 min-w-240;
  margin-top: 5px;
}
.dropdown_item {
  @apply px-4 py-2 block whitespace-nowrap border-2 border-white hover:bg-gray-50 hover:text-gray-800 hover:border-teal-700;
}

/* Buttons */
.button {
  @apply py-2 px-8 font-semibold rounded-md;
}
.button-large {
  @apply text-lg;
}
.button-neutral {
  @apply text-gray-500 hover:text-gray-800;
}
.button-secondary {
  @apply bg-white text-gray-500 shadow border border-gray-200 hover:bg-gray-50 hover:text-gray-800;
}
.button-primary {
  @apply bg-teal-700 text-white shadow hover:bg-teal-800;
}
.button-danger {
  @apply bg-red-600 text-white shadow hover:bg-red-700;
}

/* Colorful rounded pills */
.pill-rounded {
  @apply rounded-full flex items-center justify-center text-gray-800 font-medium;
}
.pill-rounded-small {
  @apply w-8 h-8 text-sm;
}
.pill-rounded-base {
  @apply w-12 h-12;
}
.pill-rounded-large {
  @apply w-24 h-24 text-3xl;
}
