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

@view-transition {
  navigation: auto;
}

@layer components {
  input[type=button], input[type=submit], a.button, button.button {
    @apply rounded-md p-2 px-4 cursor-pointer bg-amber-300 active:bg-amber-400;
  }
  input[type=text] {
    @apply appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight 
  }
  form label {
    @apply block text-gray-700 text-sm font-bold
  }
  .pet-info > label, .pet-info > span {
    @apply basis-1/2 min-w-[50%] p-2
  }
  .pet-info > label {
    @apply text-right
  }
  #devise-layout {
    button, input[type=button], input[type=submit] {
      @apply w-full rounded-md p-2 px-4 my-4
    }
  }
  .hw-combobox-bixos, .species, .breed {
    .hw-combobox {
      @apply w-full
    }
    .hw-combobox__main__wrapper {
      @apply w-full rounded-none border-gray-500
    }
  }
  ul.tabs {
    li {
      @apply bg-white;

      svg {
        @apply w-10 h-10
      }
    }

    li > a.active {
      @apply bg-gray-100 text-gray-900;

      svg {
        @apply w-14 h-14
      }
    }
  }

  .cropper-view-box,
  .cropper-face {
    border-radius: 50%;
  }

  .legal-text {
    h1 {
      @apply text-2xl font-bold py-2;
    }
    h2 {
      @apply text-xl font-bold py-2;
    }
    h3 {
      @apply text-lg font-bold py-2;
    }
    p {
      @apply text-base py-2;
    }
    ul {
      @apply list-disc pl-4;
    }
  }

  .auth-form {
    @apply px-4 border border-slate-200 rounded-lg;
  }

  .social-login-buttons {
    button {
      @apply p-10;
    }
  }

  ul#places-list {
    @apply w-full;

    li {
      @apply flex min-h-16 p-2 border-b border-gray-200 items-center gap-2;
    }

    li.selected {
      @apply bg-gray-200;
    }

    .info {
      @apply flex flex-col;
    }
    
    .address {
      @apply text-sm text-gray-500;
    }

    span.distance {
      @apply text-sm text-gray-500 italic text-nowrap ml-auto;
    }
  }

  .marker {
    @apply w-4 h-4 rounded-full border-2 border-white bg-red-700;
  }

  .marker.selected {
    @apply w-8 h-8;
  }

  .availability {
    @apply border-blue-500 text-blue-500;

    &.selected {
      @apply bg-blue-500 text-white;
    }
  }
}

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Prevent scrolling while dialog is open */
body:has(dialog[data-dialog-target='dialog'][open]) {
  overflow: hidden;
}

/* Customize the dialog backdrop */
dialog {
  box-shadow: 0 0 0 100vw rgb(0 0 0 / 0.5);
}

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

  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* Add animations */
dialog[data-dialog-target='dialog'][open] {
  animation: fade-in 200ms forwards;
}

dialog[data-dialog-target='dialog'][closing] {
  animation: fade-out 200ms forwards;
}

.gaegu-regular {
  font-family: "Gaegu", serif;
  font-weight: 400;
  font-style: normal;
}