:root
{
 --component-tab-main-background:var(--white);
 --component-tab-border:1px solid var(--grey6);
 --component-tab-border-radius:var(--UI-big-border-radius);
 --component-tab-text:var(--grey8);
 --component-tab-background-active:var(--component-tab-main-background);
 --component-tab-background-inactive:var(--grey2);
 --component-tab-background-inactive-hover:var(--grey3);
 --component-tab-font-size:0.75rem;
 --component-tab-line-height:1
}

@media (min-width:40rem)
{
 :root
 {
  --component-tab-font-size:1rem
 }
}

.VLTabs
{
 position:sticky;
 top:0;
 background-color:var(--component-tab-main-background)
}

.VLTabs > ul
{
 margin:0;
 padding:0;
 list-style-type:none;
 border-bottom:var(--component-tab-border);
 white-space:nowrap;
 overflow:auto
}

.VLTabs > ul > li
{
 cursor:pointer;
 margin:0.5em 4px -1px 4px; padding:0;
 display:inline-block;
 border:var(--component-tab-border);
 border-top-left-radius:var(--component-tab-border-radius);
 border-top-right-radius:var(--component-tab-border-radius);
 background-color:var(--component-tab-background-inactive);
 font-size:var(--component-tab-font-size);
 line-height:var(--component-tab-line-height)
}

.VLTabs > ul > li:first-child
{
 margin-left:0.5em
}

.VLTabs > ul > li > :is(*, *:visited, *:link)
{
 display:block;
 padding:0.5em 1em;
 color:var(--component-tab-text);
 text-decoration:none
}

.VLTabs > ul > li[aria-selected=true]
{
 border-bottom-color:var(--component-tab-main-background);
 background-color:var(--component-tab-background-active)
}

.VLTabs > ul > li[aria-selected=true] > :is(*, *:visited, *:link)
{
 font-weight:bold
}

.VLTabs > ul > li[aria-selected=false]:hover
{
 background-color:var(--component-tab-background-inactive-hover)
}

.VLTab-content
{
 margin:0;
 padding:0.5em
}