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



@layer components {
  .button {
    @apply duration-300 transition text-center inline-flex items-center justify-center rounded-md border border-accent bg-accent px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-accent/50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent;
  }
  .button--dangerous {
    @apply duration-300 transition text-center inline-flex items-center justify-center rounded-md border-red-500 border px-3 py-2 text-sm font-semibold text-red-600 shadow-sm hover:bg-red-600 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600;
  }
  .button--secondary {
    @apply duration-300 transition text-center inline-flex items-center justify-center rounded-md border-accent border px-3 py-2 text-sm font-semibold text-accent shadow-sm hover:bg-accent hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black;
  }
  .checkbox {
    @apply h-4 w-4 rounded border-gray-300 text-accent focus:ring-accent;
  }
  .session_form {
    @apply flex flex-col gap-4 items-center;
  }
  .session_field {
    @apply rounded-full  border-gray-300 focus:ring-accent focus:border-accent;
  }
  .text-link {
    @apply text-accent hover:opacity-50 duration-300 transition;
  }
  .devise_heading {
    @apply text-xl my-3 capitalize font-semibold;
  }

}

@keyframes popIn {
  from {
    opacity: 0;
    scale: 95%;
  }

  to {
    opacity: 100;
    scale: 100%;
  }
}
.popIn {
  animation: 0.1 ease-out popIn;
}

.pagy.nav {
  @apply flex font-semibold text-sm text-gray-500 mt-2 ;
}
.pagy.nav a:not(.gap) {
  @apply transition duration-300 cursor-pointer relative hidden items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 md:inline-flex;
}
.pagy.nav a:not(.gap):first-child {
  @apply rounded-l-md;
}
.pagy.nav a:not(.gap):last-child {
  @apply rounded-r-md;
}
.pagy.nav a:not(.gap):hover {
  @apply bg-gray-300;
}
.pagy.nav a:not(.gap):not([href]) { /* disabled links */
    @apply text-gray-300 bg-gray-100 cursor-default;
  }
.pagy.nav a:not(.gap).current {
  @apply relative inline-flex items-center bg-accent px-4 py-2 font-semibold text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ring-accent;
}
.pagy.nav label {
  @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
}
.pagy.nav input {
  @apply bg-gray-100 border-none rounded-md;
}
.pagy.info {
  @apply text-sm text-gray-700;
}

.sort-indicator {
  @apply opacity-0 ml-2 flex-none rounded text-gray-400 transition duration-300 group-hover:opacity-100 group-focus:opacity-100;
}
[data-sort="asc"] .sort-indicator {
  @apply bg-gray-200 text-gray-900 opacity-100  rotate-180;
}
[data-sort="desc"] .sort-indicator {
  @apply bg-gray-200 text-gray-900 opacity-100;
}
[data-active="true"] [data-vertical-line] {
  @apply rotate-180;
}
[data-active="true"] [data-icon] {
  @apply rotate-180;
}

.action_container_item {
  @apply block px-4 py-2 text-sm text-gray-700 px-3 py-2 flex items-center gap-2 hover:bg-gray-100
}

.link {
  @apply relative text-xs font-semibold ;
}
.link::after {
  @apply bg-black duration-300 transition-all;
  position: absolute;
  width: 0;
  left:-2px;
  height: 1.5px;
  bottom: -2px;
  content: '';

}
.link:hover::after {
  width: calc(100% + 4px);
}
.scan-region-highlight-svg, .code-outline-highlight {
  @apply !stroke-accent;
}
/*
 * 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.
 *


 */