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

@layer base {
  body {
    @apply antialiased 
    text-neutral-500 dark:text-neutral-400 
    bg-body dark:bg-body-dark;
  }

  body.devise {
    @apply h-full;
  }

  /* Colors */

  .text-success {
    @apply text-emerald-500;
  }

  .text-danger {
    @apply text-red-500;
  }

  .text-muted {
    @apply text-neutral-500 dark:text-neutral-400;
  }

  .text-heading {
    @apply text-neutral-900 dark:text-white;
  }

  /* Typography */

  .h1 {
    @apply text-2xl md:text-3xl font-bold tracking-tight text-heading;
  }

  .h2 {
    @apply text-2xl font-bold tracking-tight text-heading;
  }

  .h3 {
    @apply text-xl font-bold tracking-tight text-heading;
  }

  .h4 {
    @apply text-base font-bold tracking-tight text-heading;
  }

  .h5 {
    @apply text-sm tracking-tight text-heading;
  }

  .h6 {
    @apply text-sm tracking-tight text-heading;
  }

  .text-huge {
    @apply h1 text-3xl sm:text-5xl;
  }

  .p {
    @apply text-base text-neutral-700 dark:text-neutral-300 leading-6;
  }

  hr {
    @apply h-px my-8 bg-neutral-300/50 border-0 dark:bg-neutral-750;
  }
}

@layer components {
  /* Links & Buttons */

  .btn {
    @apply rounded-md py-2 px-4 text-sm font-semibold 
    focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 
    hover:transition-all hover:duration-300
    cursor-pointer disabled:cursor-not-allowed;
  }

  .btn-primary {
    @apply btn bg-primary hover:bg-primary-500 inline-flex 
    text-white hover:text-slate-100 
    active:bg-primary-600
    focus-visible:outline-blue-600
    disabled:bg-primary/50;
  }

  .btn-secondary {
    @apply btn text-neutral-900 dark:text-white 
    shadow-sm 
    ring-1 ring-inset ring-neutral-300 dark:ring-neutral-750
    bg-card dark:bg-[#27262b]
    hover:bg-neutral-100 dark:hover:bg-neutral-900
    disabled:bg-neutral-200 dark:disabled:bg-transparent;
  }

  .btn-danger {
    @apply btn-secondary 
    text-rose-700 dark:text-rose-500
    hover:bg-red-800 hover:text-white
    dark:hover:bg-red-700 dark:hover:text-white
    hover:ring-red-800;
  }

  .btn-hover {
    @apply hover:text-black dark:hover:text-white
    transition 
    hover:bg-zinc-900/5 dark:hover:bg-white/5;
  }

  a {
    @apply hover:transition-colors hover:duration-300;
  }

  .link-hover {
    @apply hover:underline hover:text-primary-500 hover:underline-offset-2;
  }

  a.link {
    @apply text-primary link-hover;
  }

  .prose-section {
    @apply prose prose-slate dark:prose-invert 
    max-w-none 
    prose-a:font-semibold prose-a:text-primary prose-a:no-underline 
    hover:prose-a:text-primary-500 hover:prose-a:underline hover:prose-a:underline-offset-2;
  }

  /* Badges */
  .badge {
    @apply inline-flex items-center rounded-full w-fit px-2 py-1 ring-1 ring-inset
    text-xs font-medium;
  }

  .badge-primary {
    @apply badge bg-red-50 text-red-700 ring-red-600/20 dark:ring-red-600/40;
  }

  .badge-secondary {
    @apply badge bg-neutral-100 text-neutral-700 ring-neutral-300/50 dark:ring-neutral-750;
  }

  /* Alerts */

  .alert {
    @apply mb-6 p-4 flex gap-2.5 rounded-md 
    border
    text-sm;
  }

  .alert-icon {
    @apply h-5 w-5 flex-none;
  }

  .alert-close-btn {
    @apply inline-flex rounded-md p-1
    focus:outline-none focus:ring-2 focus:ring-offset-1 mt-1
    transition hover:bg-zinc-900/5 dark:hover:bg-white/5;
  }

  .close-btn {
    @apply alert-close-btn;
  }

  .alert-success {
    @apply alert
    border-emerald-500/20 dark:border-emerald-500/30 
    bg-emerald-50/50 dark:bg-emerald-500/5
    text-emerald-900 dark:text-emerald-200;
  }

  .alert-success-icon {
    @apply alert-icon fill-emerald-500 dark:fill-emerald-200;
  }

  .alert-success .close-btn {
    @apply alert-close-btn 
    text-emerald-500 
    hover:bg-emerald-100 dark:hover:bg-emerald-500/10
    focus:ring-emerald-600 focus:ring-offset-emerald-50;
  }

  .alert-warning {
    @apply alert
    border-amber-500/20 dark:border-amber-500/30
    bg-amber-400/10 dark:bg-amber-400/10
    text-amber-900 dark:text-amber-200;
  }

  .alert-warning-icon {
    @apply alert-icon fill-amber-500 dark:fill-amber-200;
  }

  .alert-warning .close-btn {
    @apply alert-close-btn 
    text-amber-500 
    hover:bg-amber-100  dark:hover:bg-amber-400/10
    focus:ring-amber-600 focus:ring-offset-amber-50;
  }

  .alert-danger {
    @apply alert
    border-rose-500/20 dark:border-rose-500/30
    bg-rose-50 dark:bg-rose-400/10
    text-red-800 dark:text-rose-400;
  }

  .alert-danger-icon {
    @apply alert-icon fill-rose-500 dark:fill-rose-400;
  }

  .alert-danger .body {
    @apply text-rose-700 dark:text-rose-300;
  }

  .alert-danger .close-btn {
    @apply alert-close-btn 
    text-rose-500 
    hover:bg-rose-100 dark:hover:bg-rose-400/10
    focus:ring-rose-600 focus:ring-offset-rose-50;
  }

  /* Cards */

  .card-border {
    /* duplicated as ring on the .card. It does not use this border. */
    @apply border-neutral-300/50 dark:border-neutral-750;
  }

  .card {
    @apply bg-card dark:bg-card-dark ring-1 
    ring-neutral-300/50 dark:ring-neutral-750 
    rounded-lg shadow-sm 
    my-auto 
    overflow-hidden;
  }

  .card-body {
    @apply p-6;
  }

  .card-header {
    @apply px-6 py-3 border-b card-border;
  }

  .card-title {
    @apply font-semibold text-slate-900 dark:text-slate-100;
  }

  .card-footer {
    @apply px-6 py-3 border-t card-border;
  }

  /* Tables */
  .thead {
    @apply bg-gray-50 dark:bg-neutral-950;
  }

  .th {
    @apply px-3 py-3.5 text-heading text-left text-sm font-semibold;
  }

  .tbody {
    @apply bg-card dark:bg-card-dark
    divide-y divide-neutral-300/50 dark:divide-neutral-750;
  }

  .td {
    @apply whitespace-nowrap px-3 py-4 text-sm text-muted;
  }

  /* Forms */

  .form-field .label {
    @apply block text-sm font-medium leading-6 text-neutral-900 dark:text-white border-0 p-0 bg-transparent;
  }

  .radio-check-label {
    @apply ml-2 block text-sm leading-6 
    text-neutral-900 dark:text-white group-hover:cursor-pointer;
  }

  .form-field.disabled .radio-check-label {
    @apply text-neutral-400 dark:text-neutral-500;
  }

  .error-text {
    @apply text-red-600 dark:text-rose-400;
  }

  .form-field .label.required:after {
    @apply content-['*'] error-text ml-1;
  }

  .error-label {
    @apply error-text block mt-2 text-sm;
  }

  .form-field .hint {
    @apply text-sm text-neutral-500 mt-2;
  }

  .file-input {
    @apply file:bg-transparent file:text-neutral-900 
    file:dark:text-white 
    file:shadow-sm 
    file:ring-1 file:ring-neutral-300 file:dark:ring-neutral-750 
    file:hover:bg-neutral-50 file:dark:hover:bg-neutral-900
    file:mr-4 file:my-1 file:py-0 file:px-3
    file:border-0 
    file:cursor-pointer
    file:rounded-[0.3rem];
  }

  .input-border {
    @apply border-neutral-300 dark:border-neutral-750;
  }

  .input-base {
    @apply bg-card dark:bg-[#27262b]
    hover:bg-neutral-50 dark:hover:bg-neutral-900
    focus:bg-neutral-50 dark:focus:bg-neutral-900
    border-0 
    py-1.5 px-3 
    shadow-sm
    ring-1 ring-inset ring-neutral-300 dark:ring-neutral-750
    placeholder:text-neutral-500 
    text-slate-800 dark:text-neutral-50 
    sm:text-sm sm:leading-6
    disabled:bg-neutral-200 dark:disabled:bg-transparent disabled:cursor-not-allowed;
  }

  .form-field.error .text-input {
    @apply text-red-900 ring-red-500 
    placeholder:text-red-400 focus:ring-red-500 
    dark:ring-rose-500/30 dark:bg-rose-400/10 
    dark:text-rose-400 dark:placeholder:text-red-200;
  }

  .text-input {
    @apply block w-full rounded-md 
    input-base
    focus:ring-2 focus:ring-inset focus:ring-primary dark:focus:ring-primary-500
    file-input;
  }

  /* This class is for instances where the submit button looks like it's 'inside' the form field. */
  .text-input-wrapper {
    @apply text-input flex transition duration-300 p-0.5
    hover:bg-card dark:hover:bg-card
    has-[:focus]:ring-1 has-[:focus]:ring-neutral-400 has-[:focus]:dark:ring-neutral-600
    has-[:focus]:bg-neutral-50 has-[:focus]:dark:bg-neutral-900
    has-[:hover]:bg-neutral-50 has-[:hover]:dark:bg-neutral-900
  }

  .select-input {
    @apply text-input;
  }

  .check-box-input {
    @apply h-4 w-4 rounded-md
    input-base
    checked:bg-primary-500 checked:border-transparent checked:ring-transparent
    checked:focus:bg-primary-500 checked:focus:border-transparent checked:focus:ring-transparent
    dark:checked:hover:bg-primary-500
    text-primary
    focus:ring-offset-0
    group-hover:cursor-pointer
    p-2;
  }

  .radio-button-input {
    @apply check-box-input rounded-full;
  }

  /* Application Layout */

  .top-bar {
    @apply border-b card-border shrink-0 
    fixed inset-x-0 top-0 z-40 flex 
    h-14 
    items-center justify-between 
    gap-6 px-4 sm:px-6 lg:left-72 lg:z-30 lg:px-8 lg:left-72
    transition-opacity 
    backdrop-blur-sm dark:backdrop-blur 
    bg-card/90 dark:bg-card-dark/80;
  }

  .top-bar .button {
    @apply btn-hover
    rounded-md p-1;
  }

  /* Devise Page Overwrites */

  body.devise .card {
    @apply shadow-lg;
  }
}

/* Pagy */
.pagy-nav.pagination {
  @apply inline-flex shadow-sm rounded-md;
}

.page {
  @apply text-sm font-semibold
  border border-neutral-300/50 dark:border-neutral-750
  hover:bg-neutral-100 dark:hover:bg-neutral-900;
}

.page a {
  @apply px-4 py-2;
  display: block;
}

.page.active {
  @apply bg-primary
  text-white 
  cursor-auto !important;
}

.page.prev {
  @apply rounded-l-md;
}

.page.next {
  @apply rounded-r-md;
}

/* Tribute */
.tribute-container {
  @apply bg-card dark:bg-card-dark border card-border rounded-md mb-6;
}

.tribute-item {
  @apply border-b card-border p-2 last:border-0
  text-sm font-semibold;
}

.tribute-select {
  @apply bg-gray-100 dark:bg-black 
  first:rounded-t-md last:rounded-b-md;
}
.tippy-box[data-animation=fade][data-state=hidden] {
  opacity: 0;
}

[data-tippy-root] {
  max-width: calc(100vw - 10px);
}

.tippy-box {
  position: relative;
  background-color: #000;
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
  outline: 0;
  transition-property: transform, visibility, opacity;
}

@media (prefers-color-scheme: dark) {
  .tippy-box {
    background-color: #222;
  }
}

.tippy-box[data-placement^=top] > .tippy-arrow {
  bottom: 0;
}

.tippy-box[data-placement^=top] > .tippy-arrow:before {
  bottom: -7px;
  left: 0;
  border-width: 8px 8px 0;
  border-top-color: initial;
  transform-origin: center top;
}

.tippy-box[data-placement^=bottom] > .tippy-arrow {
  top: 0;
}

.tippy-box[data-placement^=bottom] > .tippy-arrow:before {
  top: -7px;
  left: 0;
  border-width: 0 8px 8px;
  border-bottom-color: initial;
  transform-origin: center bottom;
}

.tippy-box[data-placement^=left] > .tippy-arrow {
  right: 0;
}

.tippy-box[data-placement^=left] > .tippy-arrow:before {
  border-width: 8px 0 8px 8px;
  border-left-color: initial;
  right: -7px;
  transform-origin: center left;
}

.tippy-box[data-placement^=right] > .tippy-arrow {
  left: 0;
}

.tippy-box[data-placement^=right] > .tippy-arrow:before {
  left: -7px;
  border-width: 8px 8px 8px 0;
  border-right-color: initial;
  transform-origin: center right;
}

.tippy-box[data-inertia][data-state=visible] {
  transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11);
}

.tippy-arrow {
  width: 16px;
  height: 16px;
  color: #222;
}

.tippy-arrow:before {
  content: "";
  position: absolute;
  border-color: transparent;
  border-style: solid;
}

.tippy-content {
  position: relative;
  padding: 5px 9px;
  z-index: 1;
}
/*
 * 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.
 *


 */