:root {
    --vats-gridcell-todo: hsl(from var(--vats-text) h s l / 20%);
    --vats-gridcell-todotext: hsl(from var(--vats-text) h s l / 25%);
  }

  button.svelte-1ctbl7m {
    border: solid 2px var(--vats-text);
    border-radius: 3rem;
    background-color: var(--vats-background);
    margin: 0;
    display: flex;
    position: relative;
    overflow: hidden;

    > span:where(.svelte-1ctbl7m) {
      display: flex;
      flex-direction: column;
      font: 400 var(--vats-text-xs) var(--vats-font);
      margin: auto;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      z-index: 1;
      position: absolute;
      width: 100%;
      height: 100%;
      color: var(--vats-text);
    }
  }

  .z-name.svelte-1ctbl7m {
    z-index: 2;
    display: flex;
    background-color: var(--vats-text);
    height: 2.25rem;
    font: 600 var(--vats-text-s) var(--vats-font);
    color: var(--vats-text-inverse);
    margin: auto;
  }

  button.todo.svelte-1ctbl7m {
    border: solid 2px var(--vats-gridcell-todo);

    > span:where(.svelte-1ctbl7m) {
      display: block;
      color: var(--vats-gridcell-todotext);
    }

    .z-name:where(.svelte-1ctbl7m) {
      background-color: var(--vats-gridcell-todotext);
      color: white;
    }
  }

  button.passed.svelte-1ctbl7m {
    border: solid 2px var(--vats-text);

    > span:where(.svelte-1ctbl7m) {
      display: block;
      color: var(--vats-gridcell-text);
    }

    .z-name:where(.svelte-1ctbl7m) {
      background-color: var(--vats-text);
      color: white;
    }
  }

  button.pending.svelte-1ctbl7m {
    border: solid 2px var(--vats-coloredtext);

    .z-name:where(.svelte-1ctbl7m) {
      background-color: var(--vats-coloredtext);
      color: white;
    }
  }

  button.disabled.svelte-1ctbl7m {
    border: solid 2px var(--vats-text4);

    > span:where(.svelte-1ctbl7m) {
      display: block;
      color: var(--vats-text4);
    }

    .z-name:where(.svelte-1ctbl7m) {
      background-color: var(--vats-text4);
    }
  }

  button.selected.svelte-1ctbl7m {
    outline: double 8px var(--vats-coloredtext);
  }

  button.selectable.svelte-1ctbl7m:hover {
    cursor: pointer;
    box-shadow: 0 0 8px var(--vats-coloredtext);
  }

  .z-summary.svelte-1ctbl7m {
    margin-top: 2.5rem;

    > div:where(.svelte-1ctbl7m) {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }

    .date:where(.svelte-1ctbl7m) {
      font: 400 var(--vats-text-xs) var(--vats-font);
    }

    .score:where(.svelte-1ctbl7m) {
      font: 600 var(--vats-text-m) var(--vats-font);
    }
  }

  div.svelte-1czrorb {
    display: flex;

    > div:where(.svelte-1czrorb) {
      height: 3px;
      width: 100%;
      background-color: var(--vats-text);
      margin: auto;
    }

    .vertical:where(.svelte-1czrorb) {
      height: 100%;
      width: 3px;
    }
  }

  .rochester.svelte-1fc4v1e {
    display: grid;
    row-gap: 1rem;
    column-gap: 1rem;
  }

  .rochester.aussie.svelte-1fc4v1e::before {
    content: "";
    display: block;
    grid-row: 1 / 2;
    grid-column: 1 / -1;
    background: var(--vats-bottombar-background);
    z-index: 0;
    pointer-events: none;
    border-top: 1px solid var(--vats-text4);
    border-bottom: 1px solid var(--vats-text4);
  }

  .exercise.svelte-1fc4v1e {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 8rem;

    .folder:where(.svelte-1fc4v1e) {
      font-size: var(--vats-text-xs);
      color: var(--vats-text4);
    }

    .exercise-name:where(.svelte-1fc4v1e) {
      margin: auto 1rem auto auto;
      z-index: 0;
      font: 600 var(--vats-text-m) var(--vats-font);
      color: var(--vats-text);
      text-transform: uppercase;
      text-align: right;
    }

    button:where(.svelte-1fc4v1e) {
      font: inherit;
      color: inherit;
      text-align: right;
      border: 0;
      background: transparent;
      text-transform: inherit;
      overflow: hidden;
      cursor: pointer;
    }

    button:where(.svelte-1fc4v1e):hover {
      text-decoration: underline;
    }
  }