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

@layer base {
  html[data-theme~="velodrome"] {
    --color-primary: #e84249;
    --color-primary-light: #eb6067;
    --color-primary-darker: #cc1922;
    --color-primary-lighter: #f4a4a8;
    --color-primary-max-light: #f9d2d4;
    --color-secondary: #eb6067;
    --color-secondary-1: #16a34a;
    --color-secondary-2: #0d9488;
    --color-secondary-3: #60a5fa;
    --color-secondary-4: #f59e0b;
    --color-secondary-5: #ea580c;
    --color-secondary-6: #1f2937;
    --color-warning: #cc1922;
    --common-border-radius: 0.5rem;
    @apply font-velodrome;
  }

  html[data-theme~="velodrome"] .submit-button {
    @apply my-2 font-semibold text-sm text-center text-white rounded-common hover:cursor-pointer px-4 py-2;
  }

  html[data-theme~="velodrome"] .button {
    @apply font-semibold text-sm text-center text-white bg-primary rounded-common hover:bg-primary-light hover:cursor-pointer px-4 py-2;
  }

  html[data-theme~="velodrome"] .outline-button {
    @apply font-semibold text-sm text-center border-2 border-primary text-primary rounded-common hover:bg-primary hover:text-white hover:cursor-pointer px-4 py-2;
  }

  /* html[data-theme~="velodrome"] header#main-header {
    @apply w-full fixed z-50 bg-white font-velodrome top-0;
  } */

  html[data-theme~="velodrome"] header nav {
    @apply w-screen sm:w-64 bg-slate-400 fixed h-screen top-0 left-0 overflow-y-scroll;
  }

  html[data-theme~="velodrome"] #main {
    @apply bg-white w-full min-h-screen font-velodrome;
  }

  html[data-theme~="velodrome"] #main-root {
    @apply w-full min-h-screen font-velodrome;
  }

  html[data-theme~="velodrome"] #main-admin {
    @apply max-w-screen-xl mx-auto bg-white px-2 py-8 lg:p-16 min-h-screen mt-10 font-velodrome;
  }

  html[data-theme~="velodrome"] #main-root #page-title {
    @apply text-3xl font-semibold text-primary col-span-1 md:col-span-8;
  }

  html[data-theme~="velodrome"] #main #page-title {
    @apply text-3xl font-semibold text-primary lg:px-0 w-full lg:w-auto lg:flex-1 lg:max-w-7xl lg:mx-auto;
  }

  html[data-theme~="velodrome"] #main-root #page-content {
    @apply w-full mt-4 pt-4 pb-2 px-2 xl:pt-8 xl:pb-4 xl:px-4 grid grid-cols-1 xl:grid-cols-10;
  }

  html[data-theme~="velodrome"] .slot {
    @apply grid grid-cols-8 border-t border-l border-t-slate-200 border-l-slate-100 border-r-4 m-1 md:m-2 pt-1;
  }

  /* html[data-theme~="velodrome"] .text-xs {
    @apply text-sm;
  } */

  html[data-theme~="velodrome"] .border-calendar {
    @apply border-slate-200;
  }

  html[data-theme~="velodrome"] .admin-subtitle {
    @apply py-1 px-2 text-lg text-primary border-l-2 border-primary mt-8 bg-gray-50;
  }

  @media (max-width: 640px) {
    html[data-theme~="velodrome"] .sm-left-64 {
      left: 0rem;
    }
  }

  @media (min-width: 640px) {
    html[data-theme~="velodrome"] .sm-left-64 {
      left: 16rem;
    }
  }
}