import { css } from '@emotion/css'

export const viewClass = css`
  height: 100%;
  display: flex;
  flex-basis: content;
`

export const contentClass = css`
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  #teamBar {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
  }
`

// TODO: fix broken layouting in sidebars, there is something messing with fixed remming in 13-16rem :)
export const sidebarClass = css`
  /* make sure no option buttons overflow; */
  /* too long channel/exercise names will be ellipsized */
  width: 18rem;
`

export const sidebarClassCompact = css`
  width: max-content;
`
