/* Sidebar CSS. Stuff inside #sidebar-container */

/* Sidebar positioning & animation*/
.sidebar-positioner{
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
  width:100%;
  height:100%;
}
.desktop-mode .sidebar-positioner{
  left:max(8px,var(--mcd-space-distributed));
}
.mobile-mode .sidebar-positioner{
  left:0;
}
body.langmode-en{
  --sidebar-width:214px;
  --sidebar-margin-left:-8px;
}
body.langmode-ko{
  --sidebar-width:190px;
  --sidebar-margin-left:0px;
}
.desktop-mode .sidebar-topspacer{
  flex-shrink:100;
  flex-basis:10svh;
  align-self:stretch;
}
.mobile-mode .sidebar-topspacer{
  display:none;
}
#sidebar-intro-anim-positioner{
  
  display:flex;
  justify-content:center;
  align-items:center;
}
.mobile-mode #sidebar-intro-anim-positioner{
  /* This was calculated with below values.
   * recalculate if any of the values change.
   * sidebar button image W 130px H 80px
   * sidebar button padding 16px */
  width: 162px;
  height: 112px;
}
.desktop-mode #sidebar-intro-anim-positioner{
  width:var(--sidebar-width);
  margin-left:var(--sidebar-margin-left);
  height:160px; /* This is the initial size of the scroll. */
}
#letter-magic-spritesheet-animation{
  /* background-position,opacity,transform will be animated & set by JS (main.js) */
  width:320px; 
  height:320px; 
  flex-shrink:0;
  background-image:url("../sprites-prototype/MPN2-Prototype-Image-LetterMagicSpSht.png");
}

/* The actual sidebar*/
#sidebar{
  /*border:3px solid #d3bf84; */
  
  --sb-slice-right:269;
  --sb-slice-left: 179;
  --sb-slice-top:  220;
  --sb-slicer-bottom: 210;
  
  --sb-edge-width-multiplier:0.3px;
  
  /* max-height and transform will be animated & set by JS (main.js) */
  
  border-image-source: url("/sprites/OBJ-001_RszH500-Outline10px.png");
  border-image-width: 
    calc(var(--sb-slice-top) * var(--sb-edge-width-multiplier))
    calc(var(--sb-slice-right) * var(--sb-edge-width-multiplier))
    calc(var(--sb-slicer-bottom) * var(--sb-edge-width-multiplier))
    calc(var(--sb-slice-left) * var(--sb-edge-width-multiplier));
  border-image-outset: 0px;
  border-image-slice:
    var(--sb-slice-top) 
    var(--sb-slice-right)
    var(--sb-slicer-bottom)
    var(--sb-slice-left)
    fill; /* T R B L */
  
  position:relative;
  
  width:var(--sidebar-width);
  margin-left:var(--sidebar-margin-left);
}

#sidebar.css-filters{
  filter:drop-shadow(8px 8px 10px #00000080);
}
#sb-close-button-container{
  position:absolute;
  top: 16px;
  right:40px;
  width:80px;
  height:80px;
  z-index:+3;
  cursor:pointer;
  pointer-events:auto;
}
#sb-close-button{
  position:absolute;
  top: 8px;
  right:8px;
  bottom: 8px;
  left:8px;
}

#sidebar-content{
  overflow:hidden;
  
  
  /* The reason why we use both margins and padings 
   * is because overflow cut-off is only affected by the margin box.
   * by mixing and matching margins and paddings, we can position the element
   * and the cut-off. */
  margin-top:12px;
  margin-left:20px;
  margin-bottom:32px;
  
  padding-top:16px;
  padding-bottom:4px;
  padding-left:6px;
  
  flex-shrink:0;
  
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  text-align:left;
  
  color:var(--color-sidebar-text-normal);
  
  gap:0.6em;
}

/* Only grab mouse from the entire scroll if in mobile mode. */
.sb-mobile-mode #sidebar{
  pointer-events:auto;
}

#sidebar-content > *{ 
  flex-shrink:0;
}

.sb-divider{
  flex-shrink:0;
  flex-grow:0;
  background-image: linear-gradient(
    to right,
    hsl(from var(--color-sidebar-text-normal) h s l / 0%) 0%,
    var(--color-sidebar-text-normal) 10% 60%,
    hsl(from var(--color-sidebar-text-normal) h s l / 0%) 100%);
  height:2px;
  width:calc(var(--sidebar-width) - 60px);
}
.sb-category-container{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  
}

.sb-entry{
  pointer-events:auto;
}
@media ((hover: hover) and (pointer: fine)) {
  .sb-entry:not(.sb-link-disabled):hover{
    color:var(--color-sidebar-text-hover);
  }
}
.sb-link::after{
  content:"";
  display:inline-block;
  /*max-height:0.8em;*/
  height:1.0em;
  width:3.6em;

  transition-property: opacity, margin;
  transition-duration:0.5s;
  opacity:0;
  margin-left:-10px;
  
  background-repeat:no-repeat;
  background-size:contain;
  background-image: url("../sprites/FiM_S8E01_11m24s_EDIT01_Fill-644A20+HFlip+ResizeX128.png");
  
  /*background-image: linear-gradient(black, white);*/
  /*background-color:#F0F;*/
}
.anim-disabled .sb-link::after{
  transition-duration:0s;
}
@media ((hover: hover) and (pointer: fine)) {
  .sb-link:not(.sb-link-disabled):not(.sb-link-selected):hover::after{
    margin-left:4px;
    opacity:1.0;
  }
}
.sb-link.sb-link-selected::after{
  background-image: url("../sprites/FiM_S8E01_11m24s_EDIT01_HFlip+ResizeX128.png");
  opacity:1.0;
  margin-left:4px;
}

.sb-category-container .sb-category-header::after{
  display:inline-block;
  transition-property: opacity;
  transition-duration:0.5s;
  opacity:0;
  
  margin-left:4px;
  /* Symbols font is bigger than default font 
   * so we try to manually match the size here...*/
  
  /* Kind of a hack, but we use transform:scale here
   * so this won't affect the line height.*/
  transform:scale(1.2); 
}
.anim-disabled .sb-category-container .sb-category-header::after{
  transition-duration:0s;
}
@media ((hover: hover) and (pointer: fine)) {
  .sb-category-container .sb-category-header:hover::after{
    opacity:1;
  }
}
.sb-category-container.sbcc-expanded .sb-category-header::after{
  /*content:".";*/
  content:"chevron_line_up";
  font-family:'Material Symbols Rounded';
}
.sb-category-container:not(.sbcc-expanded) .sb-category-header::after{
  /*content:"...";*/
  content:"unfold_more";
  font-family:'Material Symbols Rounded';
}
#sidebar.sb-expand-forced .sb-category-container .sb-category-header::after{
  display:none;
}

.sb-category-header{
  text-wrap:nowrap;
  font-size:1.2em;
  font-weight:700;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:center;
  cursor:pointer;
}

.sb-category-header::before{
  font-family:'Material Symbols Rounded';
  display:inline-block;
}

.sb-category-container.sbcc-expanded .sb-category-header:not(.sb-link-toplevel)::before{
  content:"arrow_drop_down";
  transform:scale(1.3); 
}
.sb-category-container:not(.sbcc-expanded) .sb-category-header:not(.sb-link-toplevel)::before{
  content:"arrow_right";
  transform:scale(1.3); 
}
.sb-category-header.sb-link-toplevel::before{
  content:"stat_0";
  
}

.sbch-icon{
  font-size:0.7em;
  width:1.2em;
  text-align:center;
  margin-right:4px;
}
.sb-category-content{
  margin-left:1.4em;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  transition-property:gap, margin;
  transition-duration:0.5s;
  transition-timing-function: cubic-bezier(0, 0.6, 0.4, 1);
  
  margin-top:0;
  margin-bottom:0;
  gap:0;
}
.anim-disabled .sb-category-content{
  transition-duration:0s;
}
.sbcc-expanded .sb-category-content{
  margin-top:0.5em;
  margin-bottom:-0.2em;
  gap:0.3em;
}
.sb-link{
  display:flex;
  color:inherit;
  text-decoration:none;
  text-wrap:nowrap;
  text-align:left;
  font-weight:700;
  cursor:pointer;
}
.sb-link-toplevel{
  font-size:1.2em;
}
.sb-link-sublevel{
  font-size:1.1em;
  transition-property:height;
  transition-duration:0.5s;
  transition-timing-function: cubic-bezier(0, 0.6, 0.4, 1);
  overflow-y:hidden;
  height:0px;
}
.anim-disabled .sb-link-sublevel{
  transition-duration:0s;
}
.sbcc-expanded .sb-category-content .sb-link-sublevel{
  height:1.4em;
}
.sb-link-active{
}
.sb-link-disabled{
  opacity:0.3;
  cursor:unset;
}
.sb-link-selected{
  color:var(--color-sidebar-text-selected);
}

/* Mobile sidebar button */
/* DOM Tree:
 * #sb-button-positioner : Positions children to top left corner
 *   #sb-btn-outer-animator : Handles fade-in and slide-out animations only
 *     #sb-btn-active-area : Where the click handler is attached.
 *       #sb-btn-image-container : Defines image dimensions
 *         #sb-btn-image : Actual image
 *
 */
#sb-button-positioner{
  display:flex;
  flex-direction:row;
  justify-content:flex-start;
  align-items:flex-start;
}
#sb-btn-outer-animator{
  /* display,transform,margin-left will be set in main.js */
  margin-top:0;
}
@keyframes attention-grab{
   0%  { transform: scale(1.0) rotate(  0deg); }
   5%  { transform: scale(1.1) rotate(  0deg); }
   8%  { transform: scale(1.1) rotate(  3deg); }
  11%  { transform: scale(1.1) rotate( -3deg); }
  14%  { transform: scale(1.1) rotate(  3deg); }
  17%  { transform: scale(1.1) rotate( -3deg); }
  20%  { transform: scale(1.1) rotate(  3deg); }
  23%  { transform: scale(1.1) rotate(  0deg); }
  28%  { transform: scale(1.0) rotate(  0deg); }
}
#sb-btn-active-area{
  cursor:pointer;
  position:relative;
  pointer-events:auto;
  transition-property:transform;
  transition-duration:0.5s;
  padding:16px;
}
.anim-disabled #sb-btn-active-area{
  transition-duration:0s;
}
#sb-btn-active-area:hover{
  transform:scale(1.1);
}
/* Contains the image. Does the attention-grab animation.*/
#sb-btn-image-container{
  filter:drop-shadow(4px 4px 8px #00000080);
  animation-name: attention-grab;
  animation-duration:5.0s;
  animation-iteration-count:infinite;
  animation-direction: normal;
}
#sb-btn-active-area.inhibit-animation > #sb-btn-image-container{
  animation-name:none;
} 
#sb-btn-image{
  object-fit: contain;
  width:130px;
  aspect-ratio:1.630; /* Should match the source image. */
  display:block;
}


/* Responsive Section */
/* Targeting down to 300px. */

/* Mobile mode */
@media (width<640px) {
  #letter-magic-spritesheet-animation{
    width:240px; 
    height:240px; 
  }
  /* The below rule has two identical ID selectors in order to raise the specificity.
   * This is to override the class+ID selector that was declared above.*/
  #sidebar#sidebar{
    width:calc(100vw - 16px);
    height:calc(100dvh - 32px);
    margin-top:16px;
    margin-left:0px;
    pointer-events:auto;
    --sb-edge-width-multiplier:0.4px;
  }
  #sidebar-content{
    position:absolute;
    top: 40px;
    bottom: 40px;
    left: 32px;
    right: 32px;
    
    margin:0;
    padding:0;
    
    justify-content:space-evenly;
    overflow-y:scroll;
  }
  .langmode-ko .sb-divider{
    width:70vw;
  }
  .langmode-en .sb-divider{
    width:70vw;
  }
}

/* Smaller Mobiles */
@media (width<480px) {
}

/* Ridiculously Small Mobiles */
@media (width<360px) {
  #sb-btn-outer-animator{
    margin-top:16px;
  }
}

/* Mobile ladder */
/* PC <-640-> Big Mobile <-480-> Small Mobile <-360-> Ridiculous <-300-> I give up */
@media (width>=480px) and (width<640px) {
  /* 640 ~ 480 : Big Mobiles */
  #sidebar-content{
    /* These texts are effectively buttons, so we need it to be BIG*/
    font-size:1.8em; 
  }
}
@media (width>=360px) and (width<480px) {
  /* 480 ~ 360 : Small Mobiles */
  #sidebar-content{
    font-size:1.7em; 
  }
}
@media (width<360px) {
  /* 360 ~ 300 : Ridiculously Small Mobiles */
  #sidebar-content{
    font-size:1.6em; 
  }
}