[data-component-id="theodor:scrollytelling_table_of_contents"] {
  position: fixed;
  right: 0;
  top: 0;
  left: 0;
  z-index: 10;
  background: black;
  padding: 0.5rem;
  transition: max-height 0.5s ease-in-out;

  .container {
    position: relative;
    margin: auto;
    display: flex;
    gap: 1rem;
    max-width: 1200px;

    .logo {
      margin-block: auto;
    }

    .menu {
      background: var(--boe-color-neutral-100);
      padding: 1.25rem;
      list-style: none;
      display: flex;
      gap: 1rem;
      margin: 0;
      min-height: 4rem;
      overflow-x: scroll;

      @media screen and (min-width: 1200px) {
        flex-direction: row;
      }

      li.menu-item {
        position: relative;
        z-index: 1;
        flex: 1 0 auto;

        a {
          display: block;
          margin-inline: 0.5rem;
          margin-block: 0.2rem;
          color: var(--brand-colors-gray-light-1);
          text-decoration: none;
          font-size: 1.1rem;
        }

        &:before {
          content: '';
          z-index: -1;
          min-width: 0;
          min-height: 0;
          border-radius: 5px;
          background: var(--brand-colors-gray-light-1);
          transition: all 0.5s linear;

        }

        &.menu-item.is-active {

          &:before {
            display: block;
            position: absolute;
            top: -2px;
            width: 100%;
            height: 100%;
          }

          a {
            color: var(--boe-color-neutral-100);
          }
        }
      }

    }
  }

}

.darkmode:has([data-component-id="theodor:scrollytelling_table_of_contents"]) {

  .site-header,
  .site-footer {
    display: none;
  }

}