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

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes slide-from-right {
  from {
    transform: translateX(60px);
  }
}

@keyframes slide-from-left {
  from {
    transform: translateX(-60px);
  }
}

@keyframes slide-to-left {
  to {
    transform: translateX(-30px);
  }
}

@keyframes slide-to-right {
  to {
    transform: translateX(30px);
  }
}

html[data-turbo-visit-direction="forward"]::view-transition-old(root) {
  animation: none;
}

html[data-turbo-visit-direction="forward"]::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
  300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

html[data-turbo-visit-direction="back"]::view-transition-old(root) {
  animation: none;
}

html[data-turbo-visit-direction="back"]::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
  300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
}

@layer base {
  h1 {
    @apply text-4xl;
  }

  h2 {
    @apply text-2xl;
  }

  h3 {
    @apply text-lg;
  }

  a {
    @apply transition-opacity;
  }

  a:hover {
    @apply opacity-80;
  }

  a:active {
    @apply opacity-90;
  }

  ul {
    @apply list-disc list-inside;
  }

  img {
    @apply object-cover;
  }
}

@layer components {
  .link {
    @apply text-blue-600 underline;
  }

  .btn, [class^='btn-'], [class*=' btn-'], button, input[type="submit"] {
    @apply py-2 px-4 bg-primary text-white rounded flex items-center gap-2 cursor-pointer;
  }

  .btn:disabled, [class^='btn-']:disabled, [class*=' btn-']:disabled, button:disabled, input[type="submit"]:disabled {
    @apply bg-gray-300 text-gray-600 cursor-not-allowed;
  }

  button, input[type="submit"] {
    @apply transition-opacity;
  }

  button:hover, input[type="submit"]:hover {
    @apply opacity-80;
  }

  .btn-success {
    @apply bg-green-600;
  }

  .btn-danger {
    @apply bg-red-900;
  }

  .btn-outline {
    @apply bg-transparent border border-primary text-primary;
  }

  .btn-text {
    @apply bg-transparent p-0 text-inherit;
  }

  .card {
    @apply p-4 bg-white rounded shadow flex flex-col;
  }

  .card.no-padding {
    @apply p-0;
  }

  .card .content {
    @apply p-4;
  }
}

/* Form - default styles */

label {
  @apply font-medium text-gray-700;
}

.field_with_errors {
  @apply flex flex-col;
}

.field_with_errors ~ div:not(.field_with_errors) {
  @apply text-red-600;
}

/* Devise form - default styles */

form.new_user {
  @apply max-w-lg flex flex-col gap-4;
}

form.new_user .field {
  @apply flex flex-col gap-1;
}

form.new_user br {
  @apply hidden;
}

form.new_user .field:has(input[type=checkbox]) {
  @apply flex-row items-center;
}

a[href^='/users/'] {
  @apply self-start text-blue-600 underline;
}

a[href^='/users/'] + br {
  @apply hidden;
}