:root {
  --timetable-border-width: 4px;
  --location-header-width: 30ch;
}

.timetable-container {
  display: flex;
  flex-direction: column;
  height: 100%;

  .location {
    grid-area: location;
    display: flex;
    align-items: center;
    gap: 0.5em;

    a {
      text-decoration: none;
    }
  }

  .day {
    display: flex;
    justify-content: space-between;
    color: var(--color-text);
    margin-top: var(--block-space);
    font-size: var(--font-size-xxl);
    font-family: var(--font-mono);
    font-weight: bold;
    word-spacing: var(--block-space);
    background-color: var(--color-bg);
    width: fit-content;
    position: sticky;
    left: 0;
    z-index: 10;
    text-transform: uppercase;
  }

  .day-line {
    border-top: var(--timetable-border-width) solid var(--color-text-muted);
    margin-bottom: var(--inline-space);
    margin-top: 0;
  }

  .shows-title {
    position: sticky;
    top: 0;
    z-index: 30;
    background-color: var(--color-bg);
    margin: 0;
    padding-block: var(--inline-space);
  }

  .timetable-headers-wrapper {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 0;
  }

  .timetable-headers-wrapper::-webkit-scrollbar {
    display: none;
  }

  .shows-scroll-wrapper {
    position: relative;
    overflow-x: auto;
    overflow-y: visible;
  }

  .shows-scroll-wrapper::-webkit-scrollbar {
    height: 8px;
  }

  .shows-scroll-wrapper::-webkit-scrollbar-track {
    background: var(--color-bg-alt, #f1f1f1);
    border-radius: 4px;
  }

  .shows-scroll-wrapper::-webkit-scrollbar-thumb {
    background: var(--color-border, #ccc);
    border-radius: 4px;
  }

  .shows-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-light, #999);
  }

  .shows-scroll-container {
    min-width: max-content;
  }

  .timetable-headers {
    display: flex;
    gap: var(--inline-space);
    min-width: max-content;

  }

  .timetable--location-header {
    width: var(--location-header-width);
    color: var(--panel-header-text-color);
    background-color: var(--panel-header-bg);
    background-image: linear-gradient(to top, var(--location-color, var(--color-border)) 0.5em, transparent 0.5em);
    flex-shrink: 0;
    /* padding: calc(var(--inline-space) / 2) var(--inline-space) var(--inline-space) var(--inline-space); */
    padding: var(--inline-space);
    margin-bottom: 0;
    /* font-size: var(--font-size-l); */
    font-family: var(--font-mono);
    font-weight: 400;
    text-transform: uppercase;
    border-radius: var(--panel-radius) var(--panel-radius) 0 0;

    a {
      text-decoration: none;
    }

    &.unassigned {
      color: var(--color-text-muted);
    }
  }

  .shows-row {
    display: flex;
    gap: var(--inline-space);
    margin-bottom: var(--inline-space);
    align-items: stretch;
  }

  .shows-cell {
    width: var(--location-header-width);
    /* border-left: 6px solid; */
    flex-shrink: 0;
    min-height: 2em;
  }

  .timetable-show {
    display: grid;
    padding: var(--inline-space) var(--block-space);
    gap: calc(var(--inline-space) / 2);
    word-break: break-word;
    grid-template-columns: auto;
    grid-template-areas:
      "name"
      "time";

    border-radius: 0 var(--panel-radius) var(--panel-radius) 0;
    background-color: var(--panel-bg);

    background-image: linear-gradient(to right, var(--location-color, transparent) var(--timetable-border-width), transparent var(--timetable-border-width));

    .times {
      font-family: var(--font-mono);
      font-size: var(--font-size-s);
      font-weight: normal;
      grid-area: time;
      margin-right: auto;
    }

    .act-name {
      grid-area: name;
      font-weight: bold;
      font-size: var(--font-size-m);
      font-family: var(--font-mono);
      text-transform: uppercase;

      a {
        text-decoration: none;
        color: inherit;
      }
    }
  }
}