 /*$$$$$                                        
|_  $$_/                                        
  | $$    /$$$$$$$  /$$$$$$  /$$$$$$$   /$$$$$$$
  | $$   /$$_____/ /$$__  $$| $$__  $$ /$$_____/
  | $$  | $$      | $$  \ $$| $$  \ $$|  $$$$$$ 
  | $$  | $$      | $$  | $$| $$  | $$ \____  $$
 /$$$$$$|  $$$$$$$|  $$$$$$/| $$  | $$ /$$$$$$$/
|______/ \_______/ \______/ |__/  |__/|______*/

.minimize_icon,
.maximize_icon,
.exit_icon {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;

    width: 1.75rem;
    height: 1.75rem;

    color: var(--primary_text);
    background: var(--control_background);

    border: 1px solid var(--border);
    cursor: pointer;
}

.minimize_icon:hover,
.maximize_icon:hover,
.exit_icon:hover {
    background: var(--control_hover);
    border-color: var(--border_light);
}

.minimize_icon:focus-visible,
.maximize_icon:focus-visible,
.exit_icon:focus-visible {
    outline: 2px solid var(--focus_color);
    outline-offset: 2px;
}

.minimize_icon::after {
    content: "";
    position: absolute;
    right: 0.4rem;
    bottom: 0.4rem;
    left: 0.4rem;
    height: 1px;
    background: currentColor;
}

.maximize_icon::after {
    content: "";
    position: absolute;
    inset: 0.42rem;
    border: 1px solid currentColor;
}

.exit_icon::before,
.exit_icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;

    width: 0.8rem;
    height: 1px;

    background: currentColor;
    transform-origin: center;
}

.exit_icon::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.exit_icon::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.blinking_cursor {
    display: inline-block;
    width: 0.65em;
    height: 1em;
    margin-left: 0.2em;
    vertical-align: -0.12em;

    background: var(--terminal_green);
    box-shadow: 0 0 10px rgba(114, 224, 106, 0.35);

    animation: cursor_blink 1.1s steps(1, end) infinite;
}

@keyframes cursor_blink {
    50% {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blinking_cursor {
        animation: none;
    }
}