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

@layer components {

  .table-striped th,
  .table-striped td {
    @apply px-6 py-3 text-left text-sm font-bold uppercase tracking-wider;
  }

  .table-striped thead tr {
    @apply bg-slate-500 text-white font-bold;
  }

  .table-striped:not(.table-segregated) tbody tr:nth-child(even) {
    @apply bg-slate-200;
    @apply divide-y divide-slate-200;
  }

  .table-striped.table-segregated tbody tr:nth-child(even) {
    @apply bg-slate-200;
    @apply divide-x divide-slate-800;
  }

  .table-segregated tr {
    @apply divide-x divide-slate-800;
  }

  [data-transaction-type="sell"] .table-striped:not(.table-segregated) thead tr {
    @apply bg-green-500 text-white font-bold;
  }

  [data-transaction-type="sell"] .table-striped:not(.table-segregated) tbody tr:nth-child(even) {
    @apply bg-green-200;
    @apply divide-y divide-green-200;
  }

  .buy-prices__selection-button {
    @apply px-4 py-2 rounded-md text-sm font-medium text-white bg-slate-500 hover:bg-slate-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75;
  }

  .buy-prices__selection-button--selected {
    @apply bg-slate-600;
  }

  .market-prices-banner {
    @apply flex gap-x-8 gap-y-2 mb-14 justify-center text-lg flex-wrap;
  }

  .market-prices-banner__metal {
    @apply bg-slate-500 text-white px-2 py-1;
  }

  .cart__display table th {
    @apply px-6 py-3 text-left text-lg font-bold uppercase tracking-wider;
  }

  .cart__display table td {
    @apply px-6 py-3 text-left text-lg font-bold uppercase tracking-wider;
  }

  .cart__clear {
    @apply bg-red-500 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-red-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75;
  }

  .still-active__container {
    @apply fixed top-0 left-0 w-full h-full flex flex-col items-center gap-y-48 bg-white z-50 items-center justify-center;
  }

  .still-active__container.still-active__container--hidden {
    @apply hidden;
  }

  .still-active__continue {
    @apply bg-red-500 text-white px-16 py-8 rounded-md text-4xl font-medium hover:bg-red-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75;
  }

  .still-active__start-over {
    @apply bg-green-500 text-white px-20 py-10 rounded-md text-8xl font-medium hover:bg-green-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75;
  }

  .body-scroll-lock {
    @apply overflow-hidden;
  }

  .sortable-drag,
  .sortable-ghost,
  .sortable-chosen {
    @apply bg-blue-100;
  }

  h1,
  h2 {
    @apply text-2xl font-bold mb-6;
  }

  a {
    @apply text-blue-500 hover:text-blue-700;
  }
}
/*
 * 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.
 *


 */