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

@layer components {
  .page-title {
    @apply my-4 text-2xl text-center uppercase font-antique;
  }

  .disabled {
    @apply cursor-not-allowed;
  }

  .btn-dark {
    @apply bg-black text-white font-antique uppercase px-4 py-2 md:text-lg flex items-center justify-center w-fit;
  }

  .btn-dark:hover {
    @apply bg-mamiche-yellow text-black cursor-pointer transition-all ease-in-out duration-300;
  }

  .btn-light {
    @apply bg-white text-black font-antique uppercase px-4 py-2 md:text-lg flex items-center justify-center border-2 border-black w-fit;
  }

  .btn-light:hover {
    @apply bg-black cursor-pointer transition-all ease-in-out duration-300 text-mamiche-yellow;
  }

  .btn-warning {
    @apply bg-mamiche-yellow text-black font-antique uppercase px-4 py-2 md:text-lg flex items-center justify-center w-fit;
  }

  .btn-warning:hover {
    @apply bg-black text-mamiche-yellow cursor-pointer transition-all ease-in-out duration-300;
  }

  .btn-danger {
    @apply bg-red-600 text-white font-antique uppercase px-4 py-2 md:text-lg  flex items-center justify-center w-fit;
  }

  .btn-danger:hover {
    @apply bg-red-700 text-white cursor-pointer transition-all ease-in-out duration-300;
  }

  .btn-light-gray {
    @apply bg-neutral-200 text-neutral-600 font-antique uppercase px-4 py-2 md:text-lg  flex items-center justify-center w-fit;
  }

  .btn-light-gray:hover {
    @apply bg-neutral-100 text-neutral-600 cursor-pointer transition-all ease-in-out duration-300;
  }

  .btn-lineitem {
    @apply bg-neutral-100 text-neutral-600 flex items-center justify-center px-2.5;
  }

  .btn-lineitem:hover {
    @apply bg-neutral-200 text-neutral-600 cursor-pointer transition-all ease-in-out duration-300;
  }

  .btn-light-gray-outline {
    @apply border border-neutral-400 rounded text-neutral-400 flex items-center justify-center px-1 text-xs;
  }

  .btn-light-gray-outline:hover {
    @apply bg-neutral-400 text-white transition-all ease-in-out cursor-pointer duration-300;
  }

  .btn-danger-outline {
    @apply border border-red-600 text-red-600 rounded;
  }

  .btn-danger-outline:hover {
    @apply bg-red-600 text-white transition-all ease-in-out;
  }

  .btn-lineitem-outline {
    @apply border border-neutral-400 text-neutral-400 flex items-center justify-center px-1 text-xs;
  }

  .btn-lineitem-outline:hover {
    @apply bg-neutral-400 text-white transition-all ease-in-out cursor-pointer duration-300;
  }

  .btn-nav {
    @apply text-neutral-100 font-antique uppercase rounded bg-neutral-600 flex items-center justify-center px-3 py-1 text-sm;
  }

  .btn-nav:hover {
    @apply bg-neutral-400 text-white cursor-pointer transition-all ease-in-out duration-300;
  }

  .btn-nav-light {
    @apply px-2 py-1.5 btn-nav bg-neutral-400 text-white uppercase rounded font-antique;
  }

  .btn-nav-light:hover {
    @apply text-neutral-600 bg-neutral-300 cursor-pointer transition-all ease-in-out duration-300;
  }

  .border-xl {
    border-width: 1rem;
  }

  .btn:hover {
    @apply transition-all ease-in-out duration-700;
  }

  .label {
    @apply text-sm font-semibold block;
  }

  .input {
    @apply border border-gray-300 rounded p-2 w-full text-sm;
  }

  .checkbox {
    @apply w-4 h-4 text-emerald-600 bg-gray-100 border-gray-300 rounded focus:ring-emerald-500 focus:ring-2 cursor-pointer;
  }

  .selected,
  .total {
    color: #111111;
    background-color: #f3e770;
    padding: 0px 4px;
  }

  .quantity {
    @apply font-medium whitespace-nowrap bg-neutral-100 rounded-lg px-2 py-1;
  }

  .order-pill {
    @apply bg-neutral-100 rounded-full px-2 font-medium text-neutral-600;
  }

  .btn-outline-secondary {
    @apply border border-neutral-500 rounded text-neutral-500 text-sm p-2;
  }

  .btn-outline-secondary:hover {
    @apply bg-neutral-200 cursor-pointer transition-all ease-in-out duration-300;
  }

  .active {
    @apply bg-neutral-500 text-white;
  }

  .select-input {
    @apply border border-gray-300 rounded p-2 w-full text-sm;
  }

  .border-6 {
    border-width: 24px;
  }

  .phone-pill {
    @apply inline-block bg-mamiche-yellow text-yellow-900 rounded-full px-2.5 py-0.5;
  }

  .radio {
    @apply w-4 h-4 text-emerald-600 bg-gray-100 border-gray-300 rounded focus:ring-emerald-500 focus:ring-2 cursor-pointer rounded-full;
  }

  .error-explanation {
    @apply px-4 py-3 text-sm text-red-600 bg-red-100 rounded-md;
  }
}

/* Everything below uses old style CSS from the previous version of the app. */

.commander {
  color: #495057;
  background-color: #e0e0e0;
  padding: 4px 6px;
  text-transform: uppercase;
  font-family: "antique-olive-compact", sans-serif;
  text-decoration: none;
}

.dot {
  margin-right: 0.4rem;
  height: 0.6rem;
  width: 0.6rem;
  border-radius: 50%;
  display: inline-block;
}

.cat-name {
  display: flex;
  align-items: center;
  font-family: "antique-olive-compact", sans-serif;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.03rem;
}

.min-h-yellow {
  min-height: calc(100vh - 50px);
}

.data-pill {
  color: #34373a;
  background-color: #e0e0e0;
  padding: 3px 6px;
  border-radius: 12px;
  font-weight: 500;
  line-height: 1.1em;
}

.store-pill {
  a {
    line-height: 0.9rem;
    border-radius: 1em;
    display: inline-block;
    padding: 0.2rem 0.5rem;
  }
}

.red a {
  background: #fef2f2;
  color: #ef4444;
  &:hover {
    color: #ef4444;
  }
}

.blue a {
  background: #eef2ff;
  color: #1e3a8a;
  &:hover {
    color: #1e3a8a;
  }
}

.green a {
  background: #e6f7e6;
  color: #2e7d32;
  &:hover {
    color: #2e7d32;
  }
}

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