body{
  background-color:var(--bg-primary-color);
  color:var(--fg-primary-color);
}

ui-root{
  position:relative;
}

ui-layout{
  max-width:1920px;
  margin-inline:auto;
}

ui-main{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  padding-inline:20px;
}

header{
  position:sticky;
  display:flex;
  align-items:center;
  top:0;
  left:0;
  right:0;
  z-index:1;
  padding-block:10px;
  background-color:var(--bg-primary-color);
  border-bottom:1px solid var(--line-color);
}

footer{
  background-color:var(--bg-primary-color);
}

/* nav */
ui-sidebar{
  position:sticky;
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  row-gap:20px;
  top:0;
  overflow-y:scroll; 
  overflow-x:hidden;
  overscroll-behavior:contain;
  height:100svh;
  width:260px;
  padding-block:20px;
  padding-inline:20px;
}

nav{
  position:relative;
  display:flex;
  flex-direction:column;
  flex-grow:1;
}

nav > ul{
  position:relative;
  display:flex;
  flex-direction:column;
  list-style:none;
  margin:0;
  padding:0;
  row-gap:20px;
}

nav .static{
  display:flex;
  align-items:center;
  height:60px;
  min-height:60px;
}

nav .menu-title{
  padding-bottom:6px;
}

nav button.menu-item{
  width:100%;
}

nav button.menu-item.active{
  background-color:oklch(from var(--button-bg) calc(l + 0.04) c h / 0.2);
}

/* main */
main{
  position:relative;

  & > article{
    position:relative;
    padding-block:30px;
  }
}

article{
  & > h1:first-of-type + *{
    color:var(--fg-secondary-color);
  }
}

.example{
  border-width:1px;
  border-style:solid;
  border-color:var(--line-color);
  border-radius:var(--rounded-base);

  & > :is(.example-preview,.example-code){
    position:relative;
    max-width:100%;
    padding:20px;
  }

  & > .example-preview{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:1rem;
    border-bottom-width:1px;
    border-bottom-style:solid;
    border-bottom-color:var(--line-color);
    overflow-x:auto;

    &.flex-column{
      flex-direction:column;
    }
  }
}




table :is(th,td){
  padding-inline-end:30px;
}

.visual-block{
  background-color:var(--bg-secondary-color);
}

/* icons */
.icons{
  display:inline-flex;
  gap:20px;
  flex-wrap:wrap;
  padding:0;
}

.icons > .icon-card{
  display:flex;
  flex-direction:column;
  line-height:1;
  min-width:140px;
  row-gap:12px;
  padding:12px 10px 10px;
  align-items:center;
  background-color:oklch(from var(--bg-primary-color) calc(l + 0.04) c h);
  border-radius:var(--rounded-base);


  & > :not(ui-icon){
    font-size:var(--font-size-small);
    color:var(--fg-secondary);
  }
}