/* client/src/cal.css */
@property --calgrid-week-numbers-display { syntax: "block | none"; inherits: true; initial-value: "block"; }
:root {
  scrollbar-width: none;
  overflow-y: scroll;
}
:root::-webkit-scrollbar {
  display: none;
}
body {
  box-sizing: border-box;
  background: hotpink;
  border: 0px none;
  padding: 0px;
  margin: 0px;
  min-height: 100lvh;
}
main {
  box-sizing: border-box;
  background: white;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  padding: 0px;
  margin: 0px;
}
.cal-grid--page {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  width: min-content;
  & > .cal-grid--page-grid > .cal-grid--week {
    display: var(--calgrid-week-numbers-display, initial);
  }
  & > .cal-grid--page-caption {
    margin-left: 3em;
    width: auto;
  }
  & > .cal-grid--page-grid {
    display: grid;
    grid-auto-rows: 1.25lh;
    grid-template-columns: repeat(7, 2.5em);
    font-variant-numeric: tabular-nums;
    text-align: right;
    & > .cal-grid--day {
      padding: 0px 5px;
      &.--pad {
        color: #aaa;
      }
    }
    & > .cal-grid--week {
      padding: 0px 15px 0px 5px;
      color: #777;
    }
  }
  --calgrid-week-numbers-display: none;
  &.--show-week-numbers {
    --calgrid-week-numbers-display: block;
    & > .cal-grid--page-grid {
      grid-template-columns: 3.5em repeat(7, 2.5em);
    }
  }
}
.infinite-weeks {
  --reserved-rows: 5200;
  --row-height: 1.25lh;
  min-height: calc(var(--reserved-rows) * var(--row-height));
  width: calc(4em + 7 * 2.5em);
  background: rebeccapurple;
  padding: 0px;
  margin: 0px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  & > div {
    display: grid;
    grid-template-columns: 4em repeat(7, 2.5em);
    grid-auto-rows: var(--row-height);
    background-color: white;
    width: auto;
    padding: 0px;
    margin: 0px;
    & > div {
      display: grid;
      grid-template-columns: subgrid;
      grid-template-rows: subgrid;
      grid-column: 1 / -1;
      &:nth-child(odd) {
        outline: 1px solid black;
      }
      & > .--today {
        font-weight: bold;
        border: 1px solid red;
        border-radius: 3px;
      }
      & > .--border-bottom {
        border-bottom: 2px solid lime;
      }
      & > .--border-top {
        border-top: 2px solid magenta;
      }
      & > .--border-left {
        border-left: 2px solid cyan;
      }
      & > .month-border {
        grid-column: 2/-1;
        background-color: lightcyan;
        vector-effect: non-scaling-stroke;
        display: block;
        width: 100%;
        height: 100%;
        stroke-width: 2px;
        stroke-color: black;
        stroke: black;
        fill: none;
      }
    }
  }
}