/* components/doctool/burger-icon.blade.php: bars meet in the middle, then turn into a cross; back in reverse. */
.dt-burger {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 16px;
    height: 12px;
    color: #1C1D21;
}

.dt-burger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: top 0.2s ease 0.2s, transform 0.2s ease, opacity 0s linear 0.2s;
}

.dt-burger span:nth-child(1) { top: 0; }
.dt-burger span:nth-child(2) { top: calc(50% - 1px); }
.dt-burger span:nth-child(3) { top: calc(100% - 2px); }

[aria-expanded="true"] > .dt-burger span {
    transition: top 0.2s ease, transform 0.2s ease 0.2s, opacity 0s linear 0.2s;
}

[aria-expanded="true"] > .dt-burger span:nth-child(1) { top: calc(50% - 1px); transform: rotate(45deg); }
[aria-expanded="true"] > .dt-burger span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] > .dt-burger span:nth-child(3) { top: calc(50% - 1px); transform: rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
    .dt-burger span,
    [aria-expanded="true"] > .dt-burger span { transition: none; }
}