@import "tailwindcss";
@import "./railsui/actiontext.css";
@import "./railsui/theme.css";

@import "./railsui/headings.css";

@custom-variant dark (&:where(.dark, .dark *));
@import "choices.js/public/assets/styles/choices.css";

@import "./railsui/buttons.css";
@import "./railsui/forms.css";
@import "./railsui/navigation.css";

@import './styles.css';

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: rgb(var(--default-text-color));
}


.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500;
}

h1 {
  font-size: 2.5rem;
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.75rem;
}
h4 {
  font-size: 1.5rem;
}
h5 {
  font-size: 1.25rem;
}
h6 {
  font-size: 1rem;
}

button {
  cursor: pointer;
}

@utility bg-theme {
  background-color: background-color: color-mix(in oklch,var(--color-slate-50),var(--color-slate-700) 3%);
}
@utility bg-header {
background-color: color-mix(in oklab,var(--color-blue-900) 30%,transparent) !important;
}

@utility btn {
  @apply py-2 px-3 text-sm rounded cursor-pointer font-semibold text-center inline-flex items-center justify-center transition-colors duration-300 no-underline  whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none;
}

@utility btn-lg {
  @apply py-3 px-5 text-lg;
}

@utility btn-sm {
  @apply py-1 px-3 text-xs;
}

@layer components {
  .btn-primary {
    @apply bg-primary-500 !text-white focus:ring-primary-100/70 hover:bg-primary-600 dark:ring-secondary-500/30;
  }

  .btn-outline {
    @apply bg-white border text-slate-700 hover:bg-primary-600/10;
  }

  .btn-secondary {
    @apply bg-secondary-500 text-white focus:ring-secondary-100/70 hover:bg-secondary-600 dark:ring-secondary-500/30;
  }

  .btn-dark {
    @apply bg-gray-800 text-white focus:ring-gray-800/20 hover:bg-gray-900 dark:ring-gray-800/20 dark:hover:bg-gray-700 dark:hover:text-gray-100;
  }

  .btn-light {
    @apply bg-gray-100 text-gray-800 focus:ring-slate-200/70 hover:bg-gray-50/50 hover:border-gray-400/80 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:focus:ring-gray-600/30 dark:hover:border-gray-500 dark:hover:bg-gray-700 dark:hover:text-white;
  }

  .btn-white {
    @apply bg-white text-gray-800 border border-gray-300/90 shadow-xs shadow-gray-300/20 focus:ring-slate-100/70 hover:bg-gray-50/50 hover:border-gray-400/80 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:focus:ring-gray-600/30 dark:hover:border-gray-500 dark:hover:bg-gray-700 dark:hover:text-white;
  }

  .btn-transparent {
    @apply bg-transparent text-gray-700 border-transparent shadow-none focus:shadow-gray-300/20 hover:bg-gray-100/90 hover:text-gray-800 hover:border-gray-300 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100 dark:hover:border-gray-700 dark:focus:ring-gray-800/20 focus:ring-slate-200/70;
  }

  .btn-danger {
    @apply bg-rose-500 text-white dark:focus:ring-rose-500/30 hover:bg-rose-600 focus:ring-rose-100/70;
  }

  .btn-link {
    @apply text-primary-600 font-medium focus:shadow-none hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 focus:ring-transparent;
  }
}


.choices__inner {
  padding: 0;
  background-color: transparent;
  min-height: 42px;
}
.choices__input {
  background-color: transparent;
}
.choices__item.choices__item--selectable,
.choices__list--multiple .choices__item {
  margin-top: 5.8px;
  margin-left: 5.8px;
}
.choices__list--multiple .choices__item {
  border-radius: .25rem;
}
.active {
  @apply text-white!;
}