/****************************************************************/
/* 
   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;
	  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 : 1.25;
}

details:hover, details:focus {
	                       background : #96A6B7;
			       opacity : 1;
}


/* undo the default arrow expansion icon */
details > summary {
	            background-image: url("../imgs/info.png");
		    background-color: transparent;
		    background-position: 2.5px 4.5px;
		    background-size: 20px;
		    background-repeat: no-repeat;
		    
		    display: block;
		    list-style: none;
		    padding: 10px;
		    padding-left: 33px;
		    
		    position: relative;
}

/* 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;
		background-color: hsl(0, 30%, 95%);
		
		opacity: 1;
		
		width: max-content;
		width: -moz-max-content;
		min-width: 15em;
		max-width: 40em;
		
		height: fit-content;
		height: -moz-fit-content;
		
		padding-left: 0.4rem;
		padding-right: 1.2rem;
		padding-top: 1em;
		padding-bottom: 1em;
		
		border-radius: 10px;
		top: 35px;
		
		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);
}
    

/* animate expansion */
details[open] div {
	            animation: animateDown 0.5s linear forwards;
		    z-index: 2;
}			


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