Maybe/app/assets/stylesheets/application.tailwind.css

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

/* Reset rules, default styles applied to plain HTML */
@layer base {
  details>summary::-webkit-details-marker {
    @apply hidden;
  }

  details>summary {
    @apply list-none;
  }
}

@layer components {
  .form-field {
    @apply flex flex-col gap-1 relative px-3 py-2 rounded-md border bg-white border-alpha-black-100 shadow-xs w-full;
    @apply focus-within:border-gray-900 focus-within:shadow-none focus-within:ring-4 focus-within:ring-gray-100;
  }


  .form-field__label, .hw-combobox__label {
    @apply block text-xs text-gray-500 peer-disabled:text-gray-400;
  }

  .form-field__input {
    @apply border-none bg-transparent text-sm opacity-100 w-full p-0;
    @apply focus:opacity-100 focus:outline-none focus:ring-0;
    @apply placeholder-shown:opacity-50;
    @apply disabled:text-gray-400;
  }

  .form-field__radio {
    @apply text-gray-900;
  }

  .form-field__submit {
    @apply cursor-pointer rounded-lg bg-black p-3 text-center text-white hover:bg-gray-700;
  }

  input:checked+label+.toggle-switch-dot {
    transform: translateX(100%);
  }

  [type='checkbox'].maybe-checkbox {
    @apply rounded-sm;
  }

  [type='checkbox'].maybe-checkbox--light {
    @apply border-alpha-black-200 checked:bg-gray-900 checked:ring-gray-900 focus:ring-gray-900 focus-visible:ring-gray-900 checked:hover:bg-gray-500;
  }

  [type='checkbox'].maybe-checkbox--dark {
    @apply ring-gray-900 checked:text-white;
  }

  [type='checkbox'].maybe-checkbox--dark:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='111827' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  }

  select[multiple="multiple"] {
    @apply py-2 pr-2 space-y-0.5;
  }

  select[multiple="multiple"] option {
    @apply py-2 rounded-md;
  }

  select[multiple="multiple"] option:checked {
    @apply after:content-['\2713'] bg-white after:text-gray-500 after:ml-2;
  }

  select[multiple="multiple"] option:active,
  select[multiple="multiple"] option:focus {
    @apply bg-white;
  }

  .maybe-switch {
    @apply block bg-gray-100 w-9 h-5 rounded-full cursor-pointer;
    @apply after:content-[''] after:block after:absolute after:top-0.5 after:left-0.5 after:bg-white after:w-4 after:h-4 after:rounded-full after:transition-transform after:duration-300 after:ease-in-out;
    @apply peer-checked:bg-green-600 peer-checked:after:translate-x-4;
  }

  .prose--github-release-notes {
    .octicon {
      @apply inline-block overflow-visible align-text-bottom fill-current;
    }

    .dropdown-caret {
      @apply content-none border-4 border-b-0 border-transparent border-t-gray-500 size-0 inline-block;
    }

    .user-mention {
      @apply font-bold;
    }
  }

  .tooltip {
    @apply hidden absolute;
  }

  .btn {
    @apply px-3 py-2 rounded-lg text-sm font-medium cursor-pointer disabled:cursor-not-allowed focus:outline-gray-500;
  }

  .btn--primary {
    @apply bg-gray-900 text-white hover:bg-gray-700 disabled:bg-gray-50 disabled:hover:bg-gray-50 disabled:text-gray-400;
  }

  .btn--secondary {
    @apply bg-gray-50 hover:bg-gray-100 text-gray-900;
  }

  .btn--outline {
    @apply border border-alpha-black-200 text-gray-900 hover:bg-gray-50 disabled:bg-gray-50 disabled:hover:bg-gray-50 disabled:text-gray-400;
  }

  .btn--ghost {
    @apply border border-transparent text-gray-900 hover:bg-gray-50;
  }
}

.combobox {
  .hw-combobox__main__wrapper, .hw-combobox__input {
    @apply w-full;
  }

  .hw-combobox__main__wrapper {
    @apply border-0 p-0 focus:border-0 ring-0 focus:ring-0 shadow-none focus:shadow-none focus-within:shadow-none;
  }

  .hw-combobox__listbox {
    @apply absolute top-[160%] right-0 w-full bg-transparent rounded z-30;
  }

  .hw_combobox__pagination__wrapper {
    @apply h-px;

    &:only-child {
      @apply bg-transparent;
    }
  }

  --hw-border-color: rgba(0, 0, 0, 0.2);
  --hw-handle-width: 20px;
  --hw-handle-height: 20px;
  --hw-handle-offset-right: 0px;
}

/* Small, single purpose classes that should take precedence over other styles */
@layer utilities {
  .scrollbar::-webkit-scrollbar {
    width: 4px;
  }

  .scrollbar::-webkit-scrollbar-thumb {
    background: #d6d6d6;
    border-radius: 10px;
  }

  .scrollbar::-webkit-scrollbar-thumb:hover {
    background: #a6a6a6;
  }
}

/* Custom scrollbar implementation for Windows browsers */
.windows {
  ::-webkit-scrollbar {
    width: 4px;
  }

  ::-webkit-scrollbar-thumb {
    background: #d6d6d6;
    border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #a6a6a6;
  }  
}