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

@layer base {
  html[data-theme~="st_james"] {
    --color-primary: #143058;
    --color-primary-light: #1c447d;
    --color-primary-darker: #0e223e;
    --color-primary-lighter: #97b9e7;
    --color-primary-max-light: #d5e3f6;
    --color-secondary: #a6b0c0;
    --color-secondary-1: #143058;
    --color-secondary-2: #72839b;
    --color-secondary-3: #e84249;
    --warning: #e84249;
    --common-border-radius: 0.5rem;
    @apply font-st-james-base;
  }

  html[data-theme~="st_james"] .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~="st_james"] .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~="st_james"] .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~="st_james"] header#main-header {
    @apply w-full fixed z-50 bg-white font-velodrome top-0;
  } */

  html[data-theme~="st_james"] header nav {
    @apply bg-white w-screen sm:w-64 fixed h-screen top-0 left-0 text-primary font-st-james-title border-r-2 border-slate-200;
  }

  html[data-theme~="st_james"] .bg-header {
    @apply bg-white text-primary;
  }

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

  html[data-theme~="st_james"] h1,
  html[data-theme~="st_james"] h2 {
    @apply font-st-james-title;
  }

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

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

  html[data-theme~="st_james"] #main-root #page-title {
    @apply text-5xl text-white col-span-1 md:col-span-8 font-st-james-title;
  }

  html[data-theme~="st_james"] #main #page-title {
    @apply text-5xl text-white lg:px-0 w-full lg:w-auto lg:flex-1 lg:max-w-7xl lg:mx-auto font-st-james-title;
  }

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

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

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

  html[data-theme~="st_james"] footer {
    color: #a6b0c0;
  }

  html[data-theme~="st_james"] footer a:hover {
    @apply text-primary;
  }

  html[data-theme~="st_james"] .border-calendar {
    border-color: #a6b0c0;
  }

  html[data-theme~="st_james"] .calendar-header {
    color: #72839b;
  }

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

  html[data-theme~="st_james"] .event-description {
    @apply text-primary;
    font-weight: 300;
  }

  html[data-theme~="st_james"] .event-description a {
    @apply text-primary hover:text-primary-light underline;
  }

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

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