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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground text-sm;
  }
  fieldset {
    @apply border border-black border-solid rounded-lg p-4;
  }
  table {
    @apply w-1/2;
  }
  input[type="checkbox"],
  input[type="radio"] {
    @apply focus:outline-none focus:ring-0 focus:ring-offset-0;
  }
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  input[type="date"],
  select {
    @apply flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50;
  }

  label {
    @apply text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 uppercase;
  }
  legend {
    @apply text-sm font-semibold;
  }
  table {
    @apply w-full caption-bottom text-sm border;
  }
  thead {
    @apply [&_tr]:border-b;

    tr {
      @apply bg-gray-100
    }
  }
  th {
    @apply h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px];
  }
  tbody {
    @apply [&_tr:last-child]:border-0;

    tr {
      @apply border-b transition-colors data-[state=selected]:bg-muted even:bg-gray-100 odd:bg-white;
    }
  }
  td {
    @apply p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]
  }
  tfoot {
    @apply border-t bg-muted/50 font-medium [&>tr]:last:border-b-0;
  }
  .breadcrumbs {
    @apply border border-solid list-none ml-0 overflow-hidden py-2 bg-gray-100;

    a {
      @apply float-left text-[0.6875rem] leading-[0.6875rem] m-0 uppercase text-blue-500;
    }
    .current {
      @apply text-black cursor-not-allowed;
    }
  }
  .centered {
    @apply flex justify-center items-center;
  }
  .checkbox-label {
    @apply relative inline-block w-14 h-8;
  }
  .checkbox-input {
    @apply opacity-0 w-0 h-0;
  }
  .checkbox-span {
    @apply absolute cursor-pointer inset-0 bg-gray-300 transition duration-300 before:absolute before:content-[''] before:h-6 before:w-6 before:left-1 before:bottom-1 before:bg-white before:transition before:duration-300 peer-checked:bg-green-600 peer-focus:shadow-md peer-checked:before:transform peer-checked:before:translate-x-6 rounded-full before:rounded-full;
  }
  .destructive-button {
    @apply bg-destructive text-destructive-foreground px-4 py-2 rounded-lg;
  }
  .drinks-logo {
    @apply w-10 h-10 bg-white text-4xl rounded cursor-pointer block mr-2;
  }
  .drinks-title {
    @apply text-xl text-white whitespace-nowrap duration-300;
  }
  .form-row {
    @apply flex justify-around;
  }
  .ghost-button {
    @apply inline-flex items-center justify-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 h-8 rounded-md px-3 text-xs
  }
  .green-check {
    @apply text-green-600 h-4 w-4;
  }
  .menu-item {
    @apply flex p-1 text-white hover:bg-gray-800 rounded-md cursor-pointer;
  }
  .menu-item-container {
    @apply flex flex-col space-y-2;
  }
  .menu-link {
    @apply whitespace-nowrap flex-1;
  }
  .panel {
    @apply w-3/4 p-4;
  }
  .parent-menu {
    @apply flex p-1 text-white hover:bg-gray-800 rounded-md cursor-pointer flex justify-between;
  }
  .red-x {
    @apply text-red-600 h-4 w-4;
  }
  .row {
    @apply mx-auto w-3/4;
  }
  .search-box {
    @apply w-full sm:w-3/4
  }
  .select-box {
    @apply w-[20%]
  }
  .submenu-item {
    @apply flex p-1 text-white hover:bg-gray-800 rounded-md cursor-pointer ml-2;
  }
  .submit-button {
    @apply inline-flex items-center justify-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90 h-8 rounded-md px-3 text-xs cursor-pointer;
  }
  #selected_shop-ts-control,
  #config_shop-ts-control,
  #onboarding_domain-ts-control,
  #config_domain-ts-control,
  #state-lists-ts-control,
  #state_list_ids-ts-control,
  #pp-selected-product-ts-control {
    @apply h-[36px]
  }
  div.ts-control {
    @apply px-3 py-1;
  }
}

@layer utilities {
  .breadcrumbs > *::before {
    color: #AAAAAA;
    content: "/";
    margin: 0 0.75rem;
    position: relative;
    top: 1px;
  }
  .breadcrumbs > *:first-child::before {
    content: '';
  }
}

.pagy {
  @apply flex justify-center space-x-1 font-semibold text-sm p-4;
  a:not(.gap) {
    @apply block rounded-lg px-3 py-1 bg-background;
    &:hover {
      @apply bg-accent text-accent-foreground;
    }
    &:not([href]) { /* disabled links */
      @apply text-gray-300 bg-gray-100 cursor-default;
    }
    &.current {
      @apply text-white bg-black;
    }
  }
  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;
    }
  }
}
/*
 * 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.
 *


 */