:root {
  --timetable-border-width: 4px;
}

.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: var(--block-space) 0;
    font-size: var(--font-size-xxl);
    font-family: var(--font-mono);
    font-weight: bold;
    /* border-top: 1px dashed white; */
    position: sticky;
    left: 0;
    /* transform: translateX(-50%); */
    word-spacing: var(--block-space);
    background-color: var(--color-bg);
    width: calc(100vw - 6 * var(--block-space));
    text-transform: uppercase;
    border-bottom: var(--timetable-border-width) solid var(--color-text-muted);
  }

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

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

  .shows-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;
  }

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

  .location-header {
    width: 280px;
    border: var(--timetable-border-width) solid var(--location-color, var(--color-border));
    border-bottom: none;
    background-color: var(--panel-bg);
    flex-shrink: 0;
    padding: var(--inline-space);
    margin-bottom: 0;
    font-size: var(--font-size-l);
    font-family: var(--font-mono);
    border-radius: var(--global-radius) var(--global-radius) 0 0;
  }

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

  .shows-cell {
    width: 280px;
    /* 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(--global-radius) var(--global-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-m);
      font-weight: normal;
      grid-area: time;
      margin-right: auto;
    }

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

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