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

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inconsolata:wght@200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Silkscreen:wght@400;700&display=swap');

nav.rdt_Pagination {
  @apply bg-base-200 text-base-content;
}

@layer components {
  .data-table {
    .rdt_TableHeadRow,
    .rdt_TableBody .rdt_TableRow {
      @apply bg-base-200 text-base-content border-b-secondary border-b;
    }

    .rdt_Table > div {
      @apply bg-base-200;
    }
  }

  .data-table > div > div {
    @apply bg-transparent;
  }

  .base-table {
    @apply shadow;

    .rdt_Table {
      @apply bg-transparent shadow;
    }

    .rdt_TableHeadRow,
    .rdt_TableBody .rdt_TableRow {
      @apply bg-base-200 text-base-content border-b;
    }

    .rdt_TableBody .rdt_TableRow {
      @apply py-2 dark:hover:bg-accent/50 hover:bg-base-100 border-b-base-200 dark:bg-base-300 bg-white/50;
    }

    .rdt_TableBody .rdt_TableRow.active-row {
      @apply dark:bg-secondary dark:border-b-base-200 bg-accent/10 border-b-accent/30;
    }

    .rdt_TableHeadRow {
      @apply dark:bg-base-100 bg-zinc-900 dark:text-base-content text-white text-sm dark:border-b-gray-600 border-b-base-300;
    }

    .rdt_TableBody .rdt_TableRow:last-child {
      @apply border-b-0;
    }
  }

  .activity-table {
    .rdt_TableHeadRow {
      @apply dark:border-b-base-100/60 border-b-base-300/50;
    }

    .rdt_TableBody .rdt_TableRow {
      @apply dark:border-b-base-100/60 border-b-base-300/50;
    }
  }

  .athletes-table {
    .rdt_TableBody .rdt_TableRow {
      @apply cursor-pointer border-b-base-200;
    }
  }

  .leaderboard-table {
    .rdt_TableHeadRow {
      @apply rounded-t-lg;
    }

    .rdt_TableBody .rdt_TableRow:last-child {
      @apply rounded-b-lg border-b-0;
    }
  }

  .rounded-table {
    @apply !rounded-lg;

    .rdt_TableHeadRow {
      @apply rounded-t-lg;
    }

    .rdt_TableBody .rdt_TableRow:last-child {
      @apply rounded-b-lg border-b-0;
    }
  }

  .haze-button {
    @apply bg-purple-haze-500 text-white hover:bg-purple-haze-800 disabled:bg-purple-haze-200;
  }

  .hyperlink {
    @apply text-purple-haze-500 hover:text-purple-haze-800;
  }

  .ft-table {
    @apply min-w-full table-auto border-b border-gray-300;
  }

  .ft-table thead {
    @apply bg-zinc-900 text-white;
  }

  .ft-table th {
    @apply top-0 px-6 py-4 text-left text-[12px] font-normal uppercase text-white whitespace-nowrap;
  }

  .ft-table th.text-center {
    text-align: center;
  }

  .ft-table tbody {
    @apply bg-white divide-y divide-gray-200;
  }

  .td-compact {
    @apply px-4 py-2 whitespace-nowrap;
  }

  .th-fancy th {
    @apply px-6 py-3 whitespace-nowrap text-xs w-10 text-white font-normal text-left uppercase bg-gradient-to-r from-gray-500 to-gray-600;
  }

  .blog-content > * {
    @apply mb-5 leading-loose text-gray-700;
  }

  .blog-content strong {
    @apply font-medium text-black;
  }

  .blog-content ul {
    @apply mb-6;
  }

  .blog-content h2 {
    @apply font-semibold text-lg text-black;
  }

  .blog-content ul {
    @apply list-disc list-inside;
  }

  .blog-content li {
    @apply mb-1;
  }

  .blog-content a {
    @apply hyperlink;
  }

  .blog-content table {
    @apply mb-8 w-full;
  }

  .blog-content tbody,
  .blog-content thead {
    @apply divide-y;
  }

  .blog-content table td,
  .blog-content table th {
    @apply p-2 text-sm text-center;
  }

  .blog-content table th {
    @apply font-medium;
  }

  .blog-content tr {
    @apply divide-x;
  }

  .privacy-text > * {
    @apply mb-3;
  }

  .privacy-text {
    @apply text-sm;
  }

  .privacy-text h1 {
    @apply font-semibold text-lg;
  }

  .privacy-text h2 {
    @apply font-semibold text-base;
  }

  .privacy-text h3 {
    @apply font-semibold;
  }

  .privacy-text li {
    @apply list-disc list-inside;
  }

  .privacy-text li p {
    @apply inline;
  }

  .privacy-text th {
    @apply top-0 px-6 py-3 text-left text-sm font-medium uppercase font-mono;
  }

  .athlete-profile-subheading {
    @apply uppercase font-medium inline-block text-sm mb-3 text-gray-800;
  }

  .pattern-profile {
    @apply pattern-zigzag-3d pattern-purple-haze-500 pattern-bg-purple-haze-400 pattern-opacity-100 pattern-size-1;
  }

  .ft-btn {
    @apply inline-block font-mono uppercase text-sm tracking-wide;
  }

  .ft-btn-icon {
    @apply inline mr-2 h-4 w-4;
  }

  .markdown a {
    @apply hyperlink underline;
  }

  .markdown li {
    @apply mb-1 list-disc list-inside;
  }

  .announcement a {
    @apply text-white underline;
  }

  .splits-table-container .rdt_TableHeader {
    @apply !bg-base-300;
  }

  .splits-table-container > header {
    @apply !bg-base-200;
  }

  .splits-table > div > div {
    @apply bg-base-200;
  }

  .splits-table .rdt_TableHeadRow {
    @apply dark:bg-base-100 bg-zinc-900 dark:text-base-content text-white;
  }

  .splits-table .rdt_TableBody .rdt_TableRow,
  .time-behind-table .rdt_TableBody .rdt_TableRow {
    @apply dark:!bg-base-200 dark:text-base-content border-base-100;
  }

  .splits-table .rdt_Table > div {
    @apply bg-base-200;
  }

  @media (min-width: 640px) {
    .splits-table {
      position: relative;
    }

    .splits-table .rdt_TableHeadRow,
    .splits-table .rdt_TableHead {
      z-index: 2;
    }

    .splits-table .rdt_TableBody,
    .splits-table .rdt_TableRow {
      z-index: 1;
    }

    .splits-table .rdt_TableHeadRow > div:first-child,
    .splits-table .rdt_TableHeadRow .rdt_TableCol:nth-child(2),
    .splits-table .rdt_TableHeadRow .rdt_TableCol:nth-child(3),
    .splits-table .rdt_TableHeadRow .rdt_TableCol:nth-child(4),
    .splits-table .rdt_TableHeadRow .rdt_TableCol:nth-child(5) {
      @apply dark:bg-base-100 bg-zinc-900 z-[2] sticky;
    }

    .splits-table .rdt_TableCell:first-child,
    .splits-table .rdt_TableCell:nth-child(2),
    .splits-table .rdt_TableCell:nth-child(3),
    .splits-table .rdt_TableCell:nth-child(4),
    .splits-table .rdt_TableCell:nth-child(5) {
      @apply dark:bg-secondary bg-white dark:text-base-content dark:text-white z-[1] sticky;
    }

    .splits-table .rdt_TableCell:nth-child(5) {
      @apply border-r-4;
    }

    .splits-table .rdt_TableHeadRow > div:first-child,
    .splits-table .rdt_TableCell:first-child {
      left: 0;
    }

    .splits-table .rdt_TableHeadRow .rdt_TableCol:nth-child(2),
    .splits-table .rdt_TableCell:nth-child(2) {
      left: 48px;
    }

    .splits-table .rdt_TableHeadRow .rdt_TableCol:nth-child(3),
    .splits-table .rdt_TableCell:nth-child(3) {
      left: 108px;
    }

    .splits-table .rdt_TableHeadRow .rdt_TableCol:nth-child(4),
    .splits-table .rdt_TableCell:nth-child(4) {
      left: 188px;
    }

    .splits-table .rdt_TableHeadRow .rdt_TableCol:nth-child(5),
    .splits-table .rdt_TableCell:nth-child(5) {
      left: 308px;
    }
  }
}
/*
 * 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.
 *


 */

/* Hide search input treatment */
input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

.rdt_Pagination select {
  display: none;
}

.rdt_Pagination select + svg {
  display: none;
}