/**********/
/* ASIDE  */
/**********/

aside {
  container-type:inline-size;
  container-name:aside;

  position:fixed;
  top:0;
  bottom:0;
  left:100%;
  right:-100%;

  z-index:40;
}

@media (width < 26em) {
  :root:has( aside:not( [data-current="none"] ) ) {
    overflow:hidden;
    scrollbar-gutter: stable;
  }
}

@media only print {
  aside {
    display: none;
  }
}



/*****************/
/* ASIDE WRAPPER */
/*****************/

.aside__wrapper {
  position:absolute;
  z-index: 1;
  top:0;
  bottom:0;
  left:0;
  width:100%;
  max-width:24em;
  
  padding: 0 calc(var(--gap) * .5);

  display:grid;
  grid-template-rows:min-content 1fr;
  grid-template-areas:
    "tablist"
    "tabpanel";

  background-color:var(--bg-root);

  scale:.95 .97;
  transition:0s;
}

:root[data-reduced-motion="no-preference"] .aside__wrapper {
  scale:1;
  transition:transform .5s;
}

aside:not( [data-current="none"] ) .aside__wrapper  {
  transform:translateX(-100%);
  scale:1;
  transition:scale .1s;
}

:root[data-reduced-motion="no-preference"] aside:not( [data-current="none"] ) .aside__wrapper {
  transform:translateX(-100%);
}





/************/
/* TAB LIST */
/************/

aside [role="tablist"] {
  grid-area:tablist;
  display:flex;
  padding:
    max(1em, var(--gap) * .5)
    calc(var(--gap) * .5);
}





/*********/
/* A TAB */
/*********/

aside [role="tab"] {
  flex-grow:1;
  min-height:2.5em; 
  padding:0 .25em;

  -webkit-appearance:none;
  appearance:none;

  color:var(--clr-button--tab);
  background-color:transparent;
  border:solid 1px var(--brdr-button--tab);

  display:grid;
  grid-template-rows:1.33em min-content;
  place-content:end center;
  place-items:center;
}

.button--tab__text {
  font-size:.55em;
  line-height: 1.2em;
}

.button--tab__icon {
  height:1.33em;
  width:1.33em;
}

aside [role="tab"][aria-selected="true"] {
  background-color:var(--bg-button--tab-selected);
  color:var(--clr-button--tab-selected);
}

aside [role="tab"]:not(:first-of-type, :last-of-type) {
  border-radius:0;
  margin:0 -1px;
}

aside [role="tab"]:focus-visible {
  z-index:1;
}





/*************/
/* TAB PANEL */
/*************/

aside [role="tabpanel"] {
  grid-area:tabpanel;

  position:relative;
  display:block;
  margin-bottom:max(1em, var(--gap) * .5);

  overflow-y: auto;
}

aside [role="tabpanel"][hidden] {
  z-index: -1;
  opacity: 0;
  pointer-events:none;
  user-select:none;
}

aside [role="tabpanel"] .tabpanel__fade {
  height:100%;
  overflow-y:auto;
  overscroll-behavior-y: contain;
  scrollbar-width: none;

  -webkit-mask-image: linear-gradient(
    transparent, 
    red calc(var(--gap) * .5) calc(100% - var(--gap) * .5), 
    transparent
  );
  mask-image: linear-gradient(
    transparent, 
    red calc(var(--gap) * .5) calc(100% - var(--gap) * .5), 
    transparent
  );
}

aside [role="tabpanel"] .tabpanel__fade::-webkit-scrollbar {
  display: none;
}

/* panel content */
aside [role="tabpanel"] .tabpanel__wrapper {
  padding:
  max(1em, var(--gap) * .5) 
  calc(var(--gap) * .5);

  display:grid;
  gap:calc(3em * var(--line-height-factor));
}





/*************/
/* ASIDE FOG */
/*************/

.aside__fog {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;

  background-color: var(--bg-aside__fog);  
  background-image: 
    repeating-linear-gradient(
      45deg,
      transparent 0 calc(.5% - .5px),
      var(--line-aside__fog) 0 calc(.5% + .5px),
      transparent 0 1%
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0 calc(.5% - .5px),
      var(--line-aside__fog) 0 calc(.5% + .5px),
      transparent 0 1%
    );    
}

:root[data-reduced-motion="no-preference"] .aside__fog {
  transition:.75s;
}

aside:not( [data-current="none"] ) .aside__fog {
  transform:translateX(-100%);
  cursor:pointer;
}





/******************/
/* RESPONSIVENESS */
/******************/

@container aside (width > 20em) {
  .button--tab__text {
    font-size:.75em;
  }
}

@container aside (width > 24em) {
  /* wrapper */
  .aside__wrapper {
    width:auto;
    max-width: unset;
    border-left:solid 1px currentcolor;
  }

  /* tabs */
  aside [role="tab"] {
    display: flex;
    gap:.25em;
    justify-content:center;
    padding:0 .5em;
  }
  
  .button--tab__icon {
    flex-shrink:0;
  }

  .button--tab__text {
    font-size:1em;
  }
}