/*
   stylize the details element, and make it obvious its clickable by
   changing the background color when the cursor hovers

   https://css-tricks.com/exploring-what-the-details-and-summary-elements-can-do/
*/

details {
  border-radius : 3px;
  cursor : pointer;
  display : inline-block;
  display : block; /* to center */
  position : relative;
  transition : 0.15s background linear;
  
  /* add the gradient bar to mark expandable location */
  padding-left : 0.25em;
  border-left-style : solid;
  border-image-source : linear-gradient(to bottom, #013300, #99CC66);
  border-image-slice : 1;
  border-image-width : 0.5;
}

details:hover, details:focus {
  background : rgba(150, 166, 183, 0.6); /* #96A6B7; */
  opacity : 1;
}


/* undo the default arrow expansion icon */
/* summary {...} */
details > summary {
  background-image: url("/ciao/imgs/info.png"), url("../imgs/info.png");
  background-color: transparent;
  background-position: 2.5px 4.5px;
  background-size: 25px;
  background-repeat: no-repeat;

  display: block;
  list-style: none;
  padding: 10px;
  padding-left: 33px;
}

/* remove triangle point for summary, marker=content for Firefox/IE and -webkit-details-marker=display for Safari/Opera */
details > summary::-webkit-details-marker {
  display: none;
}

details > summary::marker {
  content: "";
}

details > div {
  cursor: auto;

  width: max-content;
  width: -moz-max-content;

  /* min-width: 32em; */
  /* max-width: 72em; */

  width: calc(100% - 2.5rem); /* calc(100% - 20px) */
  
  height: fit-content;
  height: -moz-fit-content;

  padding-left: 0.4rem;
  padding-right: 1.2rem;
  padding-top: 1em;
  padding-bottom: 1em;
  
  background-color: #8493A3; /* lightslategrey; */ /* rgba(100, 149, 237, 0.9); */
  /* background-color: hsl(351, 71%, 38%); */  /* harvard crimson */
  
  font-size: 80%;
  color: #fff; 
  opacity: 1;
  
  border-radius: 10px;
  top: 35px;
  left: 0;
  right: 0;
  border-bottom: 4.5px dotted #558000;
  border-left: 4.5px dotted #558000;
  border-right: 4.5px dotted #558000;
  border-top: 4.5px dotted #558000;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;

  bottom: calc(100% + 5px);
  left: 50%;
  transform: translate(-50%);

} 


/* add triangular pop-out corner */
details > div:before {
  content: "";
  border-bottom: 12px solid #8493A3; /* lightslategrey */ /* triangle color should match the div element's background color */
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  height: 0;
  left: 10px;
  position: absolute;
  top: -10px;
  width: 0;
}
 

/* animate expansion */
details[open] div {
  animation: animateDown 0.5s linear forwards;

  /* padding-left: 0.4rem; */
  /* padding-right: 1.2rem; */
  /* padding-top: 1em; */
  /* padding-bottom: 1em; */

  left: 0;
  right: 0;
}

@keyframes animateDown {
  0% {
    opacity: 0;
    transform: translatey(-15px);
  }
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}




/* This further expands the modified details element by letting it be scrollable */
/* should it be too long.  In Chrome and Safari, the CSS will also provide visual */
/* 'wedge' indicators that the details element is scrollable. */

/* Example case, where the scrolling is activated if the contents exceeds the */
/* height specified in the 'container' class: */

/* <details> */
/*   <summary></summary> */

/*   <div> */
/*     <h4 style="margin-top:-0.25em; margin-bottom:0.75em;"> */
/*       ...Optional Header... */
/*     </h4> */
    
/*     <div class="container" style="height:30em;"> */
/*       <div class="up"> */
/*         <span class="wedge-up"/> */
/*       </div> */

/*       ... details element text body ... */

/*       <div class="down"> */
/*         <span class="wedge-down"/> */
/*       </div> */
/*     </div> */
/*   </div> */
/* </details> */


/* https://www.bram.us/2023/09/16/solved-by-css-scroll-driven-animations-detect-if-an-element-can-scroll-or-not/ */

@keyframes detect-scroll {
  from, to { --can-scroll: ;}
}


@keyframes reveal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


.container {
  /* height: 300px; */
  /* width: 350px; */

  height: fit-content;
  height: -moz-fit-content;
  overflow-y: auto;
  
  scroll-timeline: --scroll-timeline y;
  scroll-timeline: --scroll-timeline vertical; /* Firefox supports the older "vertical" syntax */
  
  padding: 0 1em;
  position: relative;
  background: #fff;
  margin: auto;
  border-radius: .3em;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  
  animation: detect-scroll;
  animation-fill-mode: none;
  
  animation-timeline: --scroll-timeline;
  animation-duration: auto; /* Firefox requires this to apply the animation */
  
  -webkit-font-smoothing: antialiased;
}


.up,.down {
  position: sticky;
  display: flex;
  justify-content: center;
  left: 0;
  right: 0;
  width: 100%;
  height: 1.5em;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  
  animation-name: reveal;
  animation-fill-mode: both;
  animation-range: 20px 40px;
  
  animation-timeline: --scroll-timeline;
  animation-duration: auto; /* Firefox requires this to apply the animation */
  
  --visibility-if-can-scroll: var(--can-scroll) visible;
  --visibility-if-cant-scroll: hidden;
  visibility: var(--visibility-if-can-scroll, var(--visibility-if-cant-scroll));
}


.up {
  top: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}


.down {
  bottom: 0;
  animation-direction: reverse;
  animation-range: calc(100% - 40px) calc(100% - 20px);
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}


.wedge-up {

  display: block;
    
  width: 20px;
  height: 20px;

  background-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4.5 15.75l7.5-7.5 7.5 7.5' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /></svg>");    
}


.wedge-down {
  display: block;
    
  width: 20px;
  height: 20px;

  background-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19.5 8.25l-7.5 7.5-7.5-7.5' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /></svg>");    
}



details > div {

    
  .container {      
    height: fit-content;
    height: -moz-fit-content;
    overflow-y: auto;

    scroll-timeline: --scroll-timeline y;
    scroll-timeline: --scroll-timeline vertical; /* Firefox supports the older "vertical" syntax */
  
    padding: 0 1em;
    position: relative;
    background: #fff;
    margin: auto;
    border-radius: .3em;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
	
    animation: detect-scroll;
    animation-fill-mode: none;
    
    animation-timeline: --scroll-timeline;
    animation-duration: auto; /* Firefox requires this to apply the animation */
	
    -webkit-font-smoothing: antialiased;
  }
   

  .up,.down {
    position: sticky;
    display: flex;
    /* display: flow; */
    justify-content: center;
    left: 0;
    right: 0;
    width: 100%;
    height: 1.5em;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);

    animation-name: reveal;
    animation-fill-mode: both;
    animation-range: 20px 40px;
    
    animation-timeline: --scroll-timeline;
    animation-duration: auto; /* Firefox requires this to apply the animation */
    
    --visibility-if-can-scroll: var(--can-scroll) visible;
    --visibility-if-cant-scroll: hidden;
    visibility: var(--visibility-if-can-scroll, var(--visibility-if-cant-scroll));
  }


  .up {
    top: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  }


  .down {
    bottom: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    animation-direction: reverse;
    animation-range-start: calc(100% - 40px);
    animation-range-end: (100% - 20px);
  }
}