main .highlight{flex:1;pre { border: 1px dashed var(--border); color: var(--base05); position: relative; font-size: 18px; overflow-x: auto; width: 100%; padding: 0; &>code { display: block; padding: 6px; overflow-x: auto; } &>code * { tab-size: 2; } & .copy-btn { margin: 5px; padding: 3px; position: absolute; top: 0; right: 17px; background: gray; border: 1px solid darkgray; width: 30px; height: 30px; opacity: 0; &:hover { opacity: 30%; } &:active { background: darkgray; border: 1px solid black; color: gray; } & svg { width: 24px; height: 24px; color: white; } } &.unfold .folder { display: none; } &.fold { height: 400px; overflow-y: hidden; overflow-x: hidden; & .folder { width: 100%; position: absolute; bottom: 0; left: 0; right: 0; height: 200px; display: grid; place-items: center; background: #000000; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 62%, rgba(0, 0, 0, 0.8) 100%); & svg { width: 24px; height: 24px; margin-top: 3rem; color: white; } } } }}