@import "vars";


.patch {
	margin-bottom: 1.25em;

	&:last-child {
		margin-bottom: 0;
	}

	position: relative;
	overflow: hidden;
	z-index: 1;

	> h1 {
		background-color: black;
		box-shadow: inset 0 0 25px -10px $color-accent;
		border: 2px solid $color-accent;
		padding: .25em;
		cursor: pointer;
		font-size: 1.35em;
		position: relative;

		&::after {
			content: "";
			display: block;
			position: absolute;
			top: 0;
			max-width: 20px;
			max-height: 20px;
			// This is extremelly hacky. I fucking hate this.
			right: .2em;
			bottom: .1em;
			aspect-ratio: 1;
			border: solid white;
			border-width: 0 3px 3px 0;
			margin: .5em;
			transform: rotate(45deg);
			transition: .5s;
			transform-origin: 75% 75%;
		}
	}

	> pre {
		$border: 2px solid $color-accent;

		position: relative;
		background-color: #1f1f1f;
		padding: .5em;
		box-shadow: inset 0 0 10px 5px black;
		border-radius: 0 0 10px 10px;
		overflow-x: auto;
		overflow-y: hidden;
		font-size: .9em;
		border-left: $border;
		border-right: $border;
		border-bottom: $border;
		transform: translateY(-100%);
		max-height: 0;

		transition:
			transform .75s,
			max-height 1s ease-in-out,
			visibility 1s 0.1s;
		z-index: -1;
		visibility: hidden;
	}

	&.active {
		> h1 {
			background-color:rgb(53, 0, 49);

			&::after {
				bottom: .25em;
				top: -.15em;
				transform: rotate(225deg);
			}
		}

		> pre {
			transform: none;
			max-height: 9999px;
			visibility: visible;
		}
	}
}