.timetable {
  --time-unit-height: 0.3rem;
  --stages: 7;
  --th-width: 3.5rem;
  
  --stage-gap: 0.2rem;
  --stage-width: min(100vw - var(--th-width) - 3rem,10rem);
  --start-time: 7;
  --end-time: 23;
  --event-duration: calc(var(--end-time) - var(--start-time) + 1);
  
  --rows: auto repeat(calc(var(--event-duration) * 12), minmax(var(--time-unit-height), auto));
  --columns: var(--th-width) repeat(var(--stages), minmax(var(--stage-width), 1fr)) 1rem;
  
  --zebra-color-one: #172437;
  --zebra-color-two: #233652;
  
}

.delete-button{
  position: relative;
  float: right;
  padding: 6px 6px;
  border: none;
  border-radius: 4px;
}

.delete-button:hover{
  color: #FF2800;
  border: none;
  cursor: pointer;
}

@keyframes slide {
  from {
    inset-inline-start: 0;
    transform: translateX(0);
  }
  to {
    inset-inline-start: 100%;
    transform: translateX(-100%);
  }
}

.timetable--body {
  max-width: 100%;

  display: grid;
  gap: 0 var(--stage-gap);
  grid-template-rows: var(--rows);
  grid-template-columns: var(--columns);
  
}

.stage {
  display: grid;
  grid-column: var(--column);
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
  position: relative;
}

.session-list {
  list-style-type: none;
  grid-row: 2 / -1;
  grid-column: 1;
  display: grid;
  grid-template-rows: subgrid;
  box-shadow: inset -1px 0 0 0 rgb(255 255 255 / 0.1);
}  


.session,.session-admin {
  --minutes-to-start: calc(var(--start-time) * 60);
  
  --start-hours-to-minutes: calc(round(down, var(--start) / 100, 1) * 60);
  --start-minutes: mod(var(--start), 100);
  --end-hours-to-minutes: calc(round(down, var(--end) / 100, 1) * 60);
  --end-minutes: mod(var(--end), 100);
  grid-row-start: calc(
    (var(--start-hours-to-minutes) + var(--start-minutes) - var(--minutes-to-start)) / 5 + 1
  );
  grid-row-end: calc(
    (var(--end-hours-to-minutes) + var(--end-minutes) - var(--minutes-to-start)) / 5 + 1
  );
}

.hours {
  position: sticky;
  --background: var(--zebra-color-one);
  display: grid;
  grid-row: 2 / -1;
  grid-column: 1 / -1;
  grid-template-rows: subgrid;
  
  > div {
    grid-row-end: span 12;
    background: var(--background);
    
    &:nth-child(odd) {
      --background: var(--zebra-color-two);
    }
  }
  
  time {
    display: block;
    position: sticky;
    width: var(--th-width);
    height: 100%;
    inset-inline-start: 0;
    background-color: #FFFFFF;
    background: rgb(from var(--background) r g b / 0.95);
  }
}
/* additional session styling */
.session {
  background: rgba(255,179,0, 0.4);
  border: 2px solid rgba(255,234,0,1);
  color: #fff;
  border-radius: 0.5rem;
  padding: 0.1rem;
  margin-block: 0.375rem;
  
  h3 {
    overflow: clip;
  }
  > * + * {
    margin-block-start: 0.1rem;
  }
}
.session-admin {
  background: rgba(207,43,14, 0.4);
  border: 2px solid rgba(255,80,48,1);
  color: #fff;
  border-radius: 0.5rem;
  padding: 0.1rem;
  margin-block: 0.375rem;
  
  > * + * {
    margin-block-start: 0.1rem;
  }
}



/* additional styling for time elements */
.hours time {
  font-weight: 500;
  line-height: 0.1;
  padding: 1rem 0;
  text-align: center;
}