details {
   position: relative;
   display: flex;
   flex-direction: column;
}

details div {
   background-color: #fff;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
   padding: 0.8rem;
   border-radius: 8px;
   position: absolute;
   max-height: calc(100vh - 100px);
   width: 100%;
   max-width: calc(100vw - 2rem);
   bottom: calc(100% + 1rem);
   right: 0;
   overflow: auto;
   transform-origin: 100% 100%;
   font-size: 0.875rem;
   z-index: 2;
}

details div::-webkit-scrollbar {
   width: 15px;
   background-color: #fff;
}

details div::-webkit-scrollbar-thumb {
   width: 2px;
   border-radius: 99em;
   background-color: #b1b1b1;
   border: 5px solid #fff;
}

details div > * + * {
   margin-top: 0.75em;
}

details div pre {
   white-space: pre-line;
   border: 1px solid #95a3b9;
   border-radius: 6px;
   font-family: monospace;
   padding: 0.75em;
   font-size: 0.875rem;
   color: #fff;
}

details[open] div {
   animation: scale 0.25s ease;
}

summary {
   display: inline-flex;
   /* margin-left: auto;
   margin-right: auto;
   justify-content: left;
   align-items: center; */
   padding: 0.5em 3em 0.5em 2em;
   list-style: none;
   text-align: center;
   cursor: pointer;
   transition: 0.15s ease;
   position: relative;
   font-size: 0.875rem;
}

summary:hover,
summary:focus {
   background-color: mix(#000, #185adb, 20%);
}

summary svg {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 1.3em;
   height: 1.3em;
   left: 0;
   transition: all 0.6s ease-in;
}
details[open] summary svg {
   transform: translateY(-50%) rotate(360deg);
   fill: red;
}
details[open] div svg {
   position: absolute;
   right: 0.3rem;
   fill: red;
   transform: rotate(45deg);
   cursor: pointer;
}