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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
:root {
  color-scheme: light dark;

  --md: 0.375rem;

  /* --p0\.5: 0.125rem; */
  --p1: 0.25rem;
  --p2: 0.5rem;
  --p3: 0.75rem;

  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  --r-x-small: 640px;
  --r-small: 768px;
  --r-desktop: 1024px;
}

.container {
  margin-left: auto;
  margin-right: auto;

  width: 100%;

  padding: 0 1rem;

  @media (min-width: 640px) {
    max-width: 640px;
  }

  @media (min-width: 768px) {
    max-width: 768px;
  }

  @media (min-width: 1024px) {
    max-width: 1024px;
    padding: 0 2rem;
  }

  @media (min-width: 1280px) {
    max-width: 1280px;
    padding: 0 2rem;
  }

  @media (min-width: 1536px) {
    max-width: 1536px;
    padding: 0 2rem;
  }
}

nav {
  --background-color: rgb(31, 41, 55);
  --button-hover-color: rgb(55 65 81);
  --active-button-color: rgb(17, 24, 39);

  --font-size: 0.875rem;

  --font-color: rgb(209 213 219);

  background-color: var(--background-color);
  font-size: var(--font-size);
  line-height: 1.25rem;

  .container {
    display: flex;
    align-items: center;
    justify-content: space-between;

    height: 4rem;
  }

  .logo {
    flex-shrink: 0;
  }

  .big-menu, .small-menu {
    width: 100%;
  }

  .big-menu {
    /* Invisible by default, made visible in media queries: */
    display: none;
  }

  @media (min-width: 640px) {
    .small-menu {
      display: none;
    }

    .big-menu {
      display: flex;
    }
  }

  .menu {
    display: flex;
    flex-grow: 1;
    margin-left: 0.5rem;
  }

  .menu, .right-menu {
    a {
      &:first-child {
        margin-left: 0.5rem;
      }

      &:last-child {
        margin-right: 0;
      }

      &:hover {
        background-color: var(--button-hover-color);
      }

      &.active, &.active:hover {
        background-color: var(--active-button-color);
        color: white;
      }

      align-content: center;
      border-radius: 0.375rem; /* FIXME: Extract! */
      color: var(--font-color);
      font-weight: var(--font-medium);
      margin-right: 0.5rem;
      padding: var(--p2) var(--p3);
    }
  }

  summary {
    &::marker {
      display: none;
      visibility: hidden;
    }

    &::before {
      content: '';
      backdrop-filter: none;
      background: transparent;
    }
  }

  .search {
    form {
      display: flex;
    }

    input {
      border-radius: var(--md);
      border: none;
      font-size: var(--font-size);
      line-height: 1.5rem;
      padding: 0.25rem 0.5rem;
    }

    input[type="text"] {
      background-color: var(--button-hover-color);
      color: white;
    }

    input[type="submit"] {
      background-color: var(--active-button-color); /* FIXME */
      color: white;
      margin-left: 0.25rem;
      font-size: 1.25rem;
    }
  }
}
.calendar-page {
  display: grid;
  gap: 1rem;

  @media (min-width: 768px) {
    grid-template-columns: 75% 25%;
  }
}

.sidebar div.calendar {
  padding: 0.5rem;

  p.title {
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: center;
  }
}

ol.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;

  li {
    display: grid;
    place-content: center;
    font-weight: 700;

    &.day {
      aspect-ratio: 1 / 1;
      border-radius: 4px;
      border: 1px solid light-dark(var(--box-border-color), var(--dark-box-border-color));

      &.muted {
        color: rgb(107 114 128);
        border: none;
      }

      &.future {
        border: none;
      }
    }
  }
}
&:root {
  --box-border-color: rgb(229 231 235);
  --box-background-color: rgb(249 250 251);
  --dark-box-border-color: rgb(82 82 91);
  --dark-box-background-color: rgb(63 63 70);
}

.box {
  border: 1px solid var(--box-border-color);
  border-radius: var(--md);

  &.shadow {
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
  }

  @media (prefers-color-scheme: dark) {
    border-color: var(--dark-box-border-color);
  }
}

.search_page {
  background-color: var(--box-background-color);

  @media (prefers-color-scheme: dark) {
    background-color: var(--dark-box-background-color);
  }

  padding: 2rem 1rem;

  width: 50%;
  margin: 0 auto;

  @media (max-width: 1024px) {
    width: 100%;
  }

  .title {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;

    .icon {
      margin-right: 0.5rem;
      font-size: 1.75rem;
      font-weight: bold;
    }
  }

  h1 {
    font-size: 1.75rem;
    font-weight: var(--font-semibold);
    vertical-align: middle;
  }

  form {
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.5rem;
    column-gap: 1rem;

    input {
      border: 1px solid var(--box-border-color);
      border-radius: var(--md);
      padding: 0.5rem 0.75rem;
      flex-grow: 1;
    }

    input[type="search"] {
      flex-grow: 2;

      @media (prefers-color-scheme: dark) {
        --darken-amount: 20%;
        background-color: color-mix(black var(--darken-amount), var(--dark-box-background-color));
        border-color: var(--dark-box-border-color);
        /* border-color: color-mix(black var(--darken-amount), var(--dark-box-border-color)); */
      }
    }

    input[type="submit"] {
      background-image: linear-gradient(#78BA55, #8BC26D);
      border-color: #78BA55;
      color: #FFF;
      padding: 0.5rem 1rem;

      @media (prefers-color-scheme: dark) {
        --darken-amount: 35%;
        background-image: linear-gradient(
          color-mix(black var(--darken-amount), #78BA55),
          color-mix(black var(--darken-amount), #8BC26D)
          );
        border-color: color-mix(black var(--darken-amount), #78BA55);
      }
    }
  }
}
:root {
  --font-color: rgb(0 0 0);
  --dark-font-color: rgb(209 213 219);
}

body {
  color: var(--font-color);

  @media (prefers-color-scheme: dark) {
    color: var(--dark-font-color);
  }
}
/*
 * 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.
 *


 */

.timeline-highlighted {
  background-color: rgb(254 243 199);

  @media (prefers-color-scheme: dark) {
    background-color: rgb(69 26 3);
  }
}