/* UNUSED */
.unused {
    display: flex;
    flex-direction: row;
    gap: 16px;
    width: 100%;
}

.unusedLabel {
    display: flex;
    height: fit-content;
}

.unusedLabelInput {
    opacity: 0;
    position: absolute;
    height: 0;
    width: 0;
}

.unusedLabelBody {
    padding: 8px 16px 8px 20px;
    display: flex;
    justify-content: center;
    gap: 16px;
    align-items: center;
    background-color: var(--secondary);
    color: var(--bone);
    white-space: nowrap;
    border-radius: 4px;
    cursor: pointer;
    transition: .3s ease;
}

.unusedOutput {
    width: 100%;
    background-color: var(--black);
    color: var(--bone);
    border-radius: 8px;
    display: grid;
    grid-template-rows: 0fr;
    font-size: 32px;
    overflow: hidden;
    opacity: 0;
    transition: grid-template-rows 4s cubic-bezier(.22, 1, .36, 1),
    opacity .5s ease .15s;
}

.unusedOutput.active {
    grid-template-rows: 1fr;
    opacity: 1;
}

.unusedOutputWrap {
    min-height: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.unusedOutputTitle {
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(12px);
    transition: transform .45s cubic-bezier(.22, 1.2, .36, 1) .05s,
    opacity .35s ease .05s;
}

.unusedOutputTitle.show {
    opacity: 1;
    transform: translateY(0);
}

.unusedOutputItem {
    display: block;
    margin-left: 40px;
    padding: 0;
    opacity: 0;
    width: fit-content;
    transform: translateY(12px) rotateX(6deg);
    transition: transform .45s cubic-bezier(.22, 1.2, .36, 1) var(--d, 0s),
    opacity .35s ease var(--d, 0s);
    will-change: transform, opacity;
    position: relative;
}

.unusedOutputItem:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: var(--bone);
    transition: transform 0.25s ease-out;
    transform-origin: bottom right;
}

.unusedOutputItem:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.unusedOutputItem.show {
    opacity: 1;
    transform: translateY(0) rotateX(0);
}

.unusedOutputItem.typing {

}