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

 :root {
  --hw-focus-color: rgb(var(--accent));
  --hw-border-width--thick: 1px;
  --hw-combobox-width: 100%;
  --hw-combobox-width--multiple: 100%;

}

.selected_tab {
    @apply border-blue-500 text-blue-600 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap pb-1.5 px-2 border-b-2 font-medium text-sm
}

.unselected_tab {
    @apply border-transparent text-gray-500 hover:text-gray-700 hover:bg-gray-100 hover:rounded-md hover:border-gray-300 whitespace-nowrap pb-1 px-2 font-normal text-sm
}

.select-menus {
    @apply mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6
}

.label {
    @apply block text-sm font-medium leading-6 text-gray-900
}

.text-field {
    @apply block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6
}

.pagy {
    @apply flex space-x-1 font-semibold text-sm text-gray-500;
    a:not(.gap) {
        @apply block rounded-lg px-3 py-1 bg-gray-200;
        &:hover {
            @apply bg-gray-300;
        }
        &:not([href]) { /* disabled links */
            @apply text-gray-300 bg-gray-100 cursor-default;
        }
        &.current {
            @apply text-white bg-gray-400;
        }
    }
    label {
        @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
        input {
            @apply bg-gray-100 border-none rounded-md;
        }
    }
}

.red_pill {
    @apply inline-flex items-center rounded-full bg-red-100 px-1.5 py-0.5 text-xs font-medium text-red-700;
}

.green_pill {
    @apply inline-flex items-center rounded-full bg-green-100 px-1.5 py-0.5 text-xs font-medium text-green-700
}

.hw-combobox__input {
    @apply text-sm placeholder-gray-500 py-1 px-0
}

.hw-combobox__main__wrapper {
  @apply mt-0 rounded-md shadow-sm max-w-screen-lg;
}

.hw-combobox__main__wrapper input:focus {
  @apply ring-0;
}

.hw-combobox__dialog__input {
  @apply rounded-lg focus:ring-0  ;
}

.hw-combobox,
[data-controller="hw-combobox"] input {
  width: var(--hw-combobox-width);
}

.sortable-ghost {
  @apply opacity-100 bg-indigo-50;
}

.sortable-drag {
  @apply rotate-1 shadow-lg bg-white rounded z-50 border-4 border-dashed border-red-500;
}
/*
 * 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.
 *


 */