.solution-hiding {
    pointer-events: none;
}

.solution-hidden {
    height: 0;
    overflow: hidden;
}

.solution-hidden .solution-main,
.solution-hiding .solution-main {
    transform: translateY(-25px) scaleY(0.95);
    opacity: 0;
}

.solution-main {
    z-index: 1;
    @apply text-gray-800;
    opacity: 1;
    transition: all 0.1s;
}

.solution-toggle {
    @apply absolute;
    @apply z-10;
    top: 0.5rem;
    right: 10px;
    @apply px-3;
    @apply py-1;
    @apply text-xs;
    @apply leading-none;
    @apply cursor-pointer;
}

.solution-toggle-show {
    top: 0;
    @apply bg-green-300;
    @apply shadow-sm;
    @apply rounded-b-sm;
    @apply z-0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 9px 100%, 0 calc(100% - 5px));
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 9px 100%, 0 calc(100% - 5px));
}

.solution-toggle-show a {
    @apply no-underline;
}

.solution-background {
    @apply absolute;
    @apply inset-0;
    top: -6px;
    margin: 0 10px;
    @apply bg-green-300;
    @apply shadow;
    @apply border;
    @apply border-tint-300;
    @apply overflow-hidden;
    @apply rounded-b-sm;
}

.solution-title {
    @apply font-semibold;
    @apply text-2xl;
    @apply leading-tight;
    @apply mb-4;
}

.solution-content-wrapper {
    @apply p-12;
    @apply overflow-x-auto;
    @apply grid;
}

.solution-description {
    @apply max-w-4xl;
}

@screen md {
    .solution-content {
        margin-left: 15rem;
    }
}

.solution code {
    @apply font-mono;
    @apply text-gray-700;
    @apply inline-block;
    @apply -my-1;
    @apply px-1;
    @apply rounded-sm;
    @apply bg-tint-100;
    @apply border;
    @apply border-tint-100;
    @apply font-mono;
    @apply text-gray-700;
    @apply break-all;
    @apply leading-tight;
}