:root {
  --right-sidebar-inline-space: max(calc(var(--inline-space) * 1.5), 1vw);
}

.right-sidebar__container {
  block-size: 100dvh;
  max-block-size: 100dvh;
  height: 100dvh;
}

.right-sidebar__toggle {
  inset-block-start: var(--block-space);
  inset-inline-start: calc((var(--btn-size) + max(var(--inline-space), 1vw)) * -1);
  position: absolute;
  transition:
    inset-inline-start 300ms ease,
    border-color 300ms ease,
    background-color 300ms ease;
  z-index: 5;

  @media (min-width: 100ch) {
    display: none;
    inset-block-start: var(--block-space);
  }

  @media (prefers-color-scheme: dark) {
    & img {
      filter: invert(100%);
    }
  }

  .open & {
    inset-block-start: var(--block-space);
    inset-inline-start: var(--right-sidebar-inline-space);

    & img {
      filter: invert(0);
    }

    @media (prefers-color-scheme: dark) {
      & img {
        filter: invert(100%);
      }
    }

    @media (min-width: 100ch) {
      inset-inline-start: calc((var(--btn-size) + max(var(--inline-space), 1vw)) * -1);
    }
  }
}

#right-sidebar:not(.open) .right-sidebar__toggle .icon-hide {
  display: none;
}
#right-sidebar.open .right-sidebar__toggle .icon-show {
  display: none;
}

.left-sidebar__container {
  padding: var(--block-space);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--block-space);
  height: var(--left-sidebar-height);
  position: fixed;
  width: 100%;
  bottom: 0;
  justify-content: space-around;

  @media (min-width: 100ch) {
    height: 100dvh;
    width: auto;
    flex-direction: column;
    position: relative;
    bottom: unset;
  }
}

.left-sidebar__student {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  filter: saturate(0);
  opacity: 0.5;
  transition: opacity 500ms ease-in-out, filter 500ms ease-in-out;

  span {
    font-weight: bold;
  }

  &:hover {
    filter: none;
    opacity: 1;
  }
}

#app-logo {
  display: none;

  @media (min-width: 100ch) {
    display: grid;
    inline-size: 2em;
    place-items: center;
    margin-block-end: var(--block-space);

    & img {
      block-size: auto;
      inline-size: 100%;
    }

  }
  @media (prefers-color-scheme: dark) {
    filter: invert(1);
  }
}

.sidebar__user-settings {
  display: none;

  @media (min-width: 100ch) {
    /* position: absolute;
    bottom: 0; */
    display: grid;
  }
}