/* Days
 * -------------------------------------------------------------------------- */

:root {
  /* We override some variables for DST days in +DaysHelper#dst_change_css_override_for+. If you
   * change the calculations here make sure you also update those. */

  --day-slots: 24;
  --night-start-slots: 2;
  --night-end-slots: 6;

  --slots-per-column: 4;
  --day-grid-columns: calc(var(--day-slots) * var(--slots-per-column));
  --day-now-columns: calc(var(--day-slots) * var(--slots-per-column) * 10);
  --day-night-start-columns: calc(var(--night-start-slots) * var(--slots-per-column));
  --day-night-end-columns: calc(var(--night-end-slots) * var(--slots-per-column));
  --day-compressed-night-time-columns: calc(2 * var(--slots-per-column));

  --placeholders-slots-per-column: 2;
  --placeholders-day-grid-columns: calc(var(--day-slots) * var(--placeholders-slots-per-column));
  --placeholders-day-night-start-columns: calc(var(--night-start-slots) * var(--placeholders-slots-per-column));
  --placeholders-day-night-end-columns: calc(var(--night-end-slots) * var(--placeholders-slots-per-column));
  --placeholders-day-compressed-night-time-columns: calc(2 * var(--placeholders-slots-per-column));
}

/* Day grid columns
 * -------------------------------------------------------------------------- */

.days-grid__columns {
  --factor: 1;

  grid-template-columns: repeat(calc(var(--day-grid-columns) * var(--factor)), 1fr);

  [data-night-end] & {
    grid-template-columns: repeat(calc((var(--day-grid-columns) - var(--day-night-end-columns)) * var(--factor)), 1fr);
  }

  [data-night-start] & {
    grid-template-columns: repeat(calc((var(--day-grid-columns) - var(--day-night-start-columns) + var(--day-compressed-night-time-columns)) * var(--factor)), 1fr);
  }

  [data-night-start][data-night-end] & {
    grid-template-columns: repeat(calc((var(--day-grid-columns) - var(--day-night-end-columns) - var(--day-night-start-columns) + var(--day-compressed-night-time-columns)) * var(--factor)), 1fr);
  }
}

.days-grid__columns--10 {
  --factor: 10;
}

/* Days
 * -------------------------------------------------------------------------- */

.days {
  height: calc(100vh - 64px); /* 100% viewport height - .navbar height - .navbar bottom margin */
  position: relative;
}

.days-grid {
  display: grid;
  height: max(360px, 100%);
  width: 100%;
  overflow-x: hidden;
  position: relative;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto auto;
  grid-template-areas:
    'titles'
    'timeline'
    'spanned-events'
    'todos';
}

.days-grid__titles {
  grid-area: titles;
  font-size: var(--font-size-small);
  min-height: var(--double-space);
}

.days-grid__timeline {
  grid-area: timeline;
  overflow-y: hidden;
  display: flex;

  visibility: hidden;

  &[data-auto-scroll-scrolled-value] {
    visibility: visible;
  }
}

.days-grid__spanned-events {
  grid-area: spanned-events;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 2px 0;
}

.days-grid__todos {
  grid-area: todos;
  border-top: 1px solid var(--color-border--medium);

  .todos {
    border-radius: 0;
  }
}

/* Day Grid - Days
 * -------------------------------------------------------------------------- */

.days-grid__day {
  display: grid;
  min-width: max(100vw, 840px); /* Width of timeline__hour (60px) * number of hours shown (14) */
  grid-template-rows: 2em auto;

  /* Reduce width when compressing night slots proportionally */
  &[data-night-start] {
    min-width: calc(max(100vw, 840px) * (1 - var(--night-start-slots)/var(--day-slots)));
  }

  &[data-night-end] {
    min-width: calc(max(100vw, 840px) * (1 - var(--night-end-slots)/var(--day-slots)));
  }

  &[data-night-end][data-night-start] {
    min-width: calc(max(100vw, 840px) * (1 - (var(--night-start-slots) + var(--night-end-slots))/var(--day-slots)));
  }
}

/* Day Grid - Times
 * -------------------------------------------------------------------------- */

.days-grid__times {
  display: grid;
  grid-row: 1/3;
  grid-column: 1;
}

.days-grid__time {
  width: 1px;
  border-left: 1px solid var(--color-border--light);
}

.days-grid__time-label {
  font-size: var(--font-size-xxx-small);
  color: var(--color-txt--subtle);
  background-color: var(--color-bg--main);
  margin-left: -2ch;
  width: 4ch;
  display: block;
  height: 3ch;
  text-align: center;
}

button.days-grid__time-label {
  cursor: pointer;
}

/* Day Grid - Events
 * -------------------------------------------------------------------------- */

.days-grid__events {
  width: 100%;
  display: grid;
  grid-row: 2 / 3;
  grid-column: 1;
  margin: var(--quarter-space) 0 var(--half-space) 0;
  position: relative;

  .event {
    font-size: var(--font-size-x-small);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 1px;
    padding: 0;
    overflow: visible;
    container-type: size;
  }

  .event__label {
    writing-mode: vertical-rl;
    transform: rotate(-180deg);
    max-height: 100%;
    max-width: none;
    text-orientation: sideways;

    @container (max-width: 20px) {
      font-size: 0.8em;
      line-height: 1;
    }
  }

  .event__label-time {
    margin: 0 0 0 -0.33em !important;
  }

  .event--freetime,
  .event--nighttime {
    .event__label {
      font-size: var(--font-size-xx-small);
      transform: rotate(0deg);
      writing-mode: lr;
      max-height: none;
      padding-bottom: 0.33em;
      opacity: 0.33;
    }
  }

  .event--freetime {
    align-items: flex-end;

    .event__label {
      color: var(--color-txt);
    }
  }

  .event--nighttime {
    .event__label {
      opacity: 0.5;
      padding-bottom: 15px;
      color: var(--color-always-white);
    }
  }

  .event--highlighted {
    .event__wrapper {
      padding: var(--half-space) 0;

      &::after {
        background-image: url("/assets/calendar/event-circle-highlight-vertical-0f7242fe.svg");
        top: 50%;
        width: 200%;
      }
    }
  }

  @container (max-width: 3em) {
    .event__label-time {
      display: none;
    }
  }
}

.days-grid__placeholders {
  display: grid;
  grid-row: 1;
  grid-column: 1;
  grid-column-end: var(--day-grid-columns);
  z-index: 1;

  [data-night-end] & {
    grid-template-columns: repeat(calc(var(--placeholders-day-grid-columns) - var(--placeholders-day-night-end-columns)), 1fr);
  }

  [data-night-start] & {
    grid-template-columns: repeat(calc(var(--placeholders-day-grid-columns) - var(--placeholders-day-night-start-columns) + var(--placeholders-day-compressed-night-time-columns)), 1fr);
  }

  [data-night-start][data-night-end] & {
    grid-template-columns: repeat(calc(var(--placeholders-day-grid-columns) - var(--placeholders-day-night-end-columns) - var(--placeholders-day-night-start-columns) + var(--placeholders-day-compressed-night-time-columns)), 1fr);
  }

  .time-grid-placeholders__placeholder {
    border-radius: 0.3em;
    background-color: transparent;
    transition: all 50ms 75ms ease-in;
    cursor: pointer;

    &:hover {
      background-color: var(--color-bg--surface-light);
    }
  }

  .time-grid-placeholders__placeholder--dragging {
    background-color: var(--color-bg--surface-light);
  }

  .time-grid-placeholders__placeholder {
    /* Hide draggable elements when dropped inside placeholder during dragging interactions */
    [draggable] {
      display: none;
    }
  }
}

/* Days Grid - Now Marker
 * -------------------------------------------------------------------------- */

.days-grid__now {
  display: grid;
  grid-row: 1 / 3;
  grid-column: 1;
  pointer-events: none;
}

.days-grid__now-marker {
  border-right: 1px dashed var(--color-orange);
  width: 0;
  z-index: 3;
  position: relative;
}

.days-grid__time-now {
  line-height: 1;
  font-weight: 500;
  font-size: var(--font-size-xx-small);
  border-radius: 1em;
  color: var(--color-orange);
  width: 14ch;
  margin-inline-end: -7ch;
  text-align: center;
  height: fit-content;
  position: absolute;
  top: -1.2rem;
  right: 0;
  padding: 2px 3px;

  .week-grid__now & {
    margin: 0;
    font-size: var(--font-size-xxxx-small);
    top: -0.7em;
    right: unset;
    left: -0.1em;
    width: auto;
    background-color: var(--color-bg--main);
  }
}

.time-now__separator {
  animation: fade-in-out 2s steps(1) infinite;
  padding: 0 0.05em;
  margin-top: -0.25em;
  top: -0.1em;
  position: relative;
}

/* Day Grid - Time Tracking
 * -------------------------------------------------------------------------- */

.days-grid__time-tracking {
  display: grid;
  grid-row: 1;
  grid-column: 1;
  align-items: end;
  grid-auto-flow: dense;

  .event {
    font-size: var(--font-size-xxx-small);
  }
}

/* Days Grid - Title
 * -------------------------------------------------------------------------- */

.days-grid__title-container {
  display: grid;
  grid-template-columns: 1fr max-content 1fr;
  align-items: center;
  column-gap: 1rem;
}

.days-grid__title {
  width: 100%;
  margin: 0 auto;
}

.days-grid__habits {
  display: flex;
  justify-content: end;

  .habit {
    display: flex;
  }

  > form:not(:first-child) {
    margin-left: -0.25em;
  }
}

/* Nighttime
 * -------------------------------------------------------------------------- */

.nighttime {
  background-color: var(--color-bg--nighttime);
  color: var(--color-txt--reversed);
  width: 100%;
  height: calc(100% - 20px);
}

.nighttime__folds {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.nighttime:before, .nighttime:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 10px;
  background: linear-gradient(
    45deg,
    transparent 33.333%,
    var(--color-bg--nighttime) 33.333%,
    var(--color-bg--nighttime) 66.667%,
    transparent 66.667%
  ),
  linear-gradient(
    -45deg,
    transparent 33.333%,
    var(--color-bg--nighttime) 33.333%,
    var(--color-bg--nighttime) 66.667%,
    transparent 66.667%
  );
  background-size: 20px 40px;
}

.nighttime:before {
  top: 0;
}

.nighttime:after {
  bottom: 0;
  transform: rotate(180deg);
  transform: scaleY(-1);
}

.nightime-grid__now {
  display: grid;
  grid-template-columns: repeat(50, 1fr);
  pointer-events: none;
  height: 100%;

  .days-grid__now-marker {
    margin-top: -5rem;
    margin-bottom: -2rem;
  }
}

.nighttime__stars {
  background: url("/assets/calendar/star-field-717d5295.svg") repeat;
  overflow: hidden;
  position: absolute;
  inset: 0;
}