/* Retro pixel art icons for menu items */
.icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    image-rendering: pixelated;
    flex-shrink: 0;
}

/* Camera icon */
.icon-camera {
    background:
        linear-gradient(var(--text-primary), var(--text-primary)) 2px 4px / 12px 8px no-repeat,
        linear-gradient(var(--text-primary), var(--text-primary)) 5px 2px / 6px 2px no-repeat,
        linear-gradient(var(--bg-cabinet), var(--bg-cabinet)) 5px 6px / 6px 4px no-repeat,
        linear-gradient(var(--text-primary), var(--text-primary)) 6px 7px / 4px 2px no-repeat;
}

/* Pencil icon */
.icon-pencil {
    background:
        linear-gradient(var(--text-primary), var(--text-primary)) 10px 2px / 4px 4px no-repeat,
        linear-gradient(var(--text-primary), var(--text-primary)) 6px 6px / 4px 4px no-repeat,
        linear-gradient(var(--text-primary), var(--text-primary)) 2px 10px / 4px 4px no-repeat,
        linear-gradient(var(--gold), var(--gold)) 0px 14px / 2px 2px no-repeat;
}

/* Lock icon */
.icon-lock {
    background:
        linear-gradient(var(--text-primary), var(--text-primary)) 4px 0px / 8px 2px no-repeat,
        linear-gradient(var(--text-primary), var(--text-primary)) 2px 2px / 2px 4px no-repeat,
        linear-gradient(var(--text-primary), var(--text-primary)) 12px 2px / 2px 4px no-repeat,
        linear-gradient(var(--gold), var(--gold)) 2px 6px / 12px 10px no-repeat,
        linear-gradient(var(--bg-cabinet), var(--bg-cabinet)) 6px 9px / 4px 4px no-repeat;
}

/* Door/exit icon */
.icon-door {
    background:
        linear-gradient(var(--text-primary), var(--text-primary)) 2px 0px / 10px 16px no-repeat,
        linear-gradient(var(--bg-cabinet), var(--bg-cabinet)) 4px 2px / 6px 12px no-repeat,
        linear-gradient(var(--neon-green), var(--neon-green)) 12px 6px / 4px 2px no-repeat,
        linear-gradient(var(--neon-green), var(--neon-green)) 14px 4px / 2px 6px no-repeat;
}

/* Trash icon */
.icon-trash {
    background:
        linear-gradient(var(--neon-red), var(--neon-red)) 2px 2px / 12px 2px no-repeat,
        linear-gradient(var(--neon-red), var(--neon-red)) 6px 0px / 4px 2px no-repeat,
        linear-gradient(var(--neon-red), var(--neon-red)) 3px 4px / 10px 12px no-repeat,
        linear-gradient(var(--bg-cabinet), var(--bg-cabinet)) 5px 6px / 2px 8px no-repeat,
        linear-gradient(var(--bg-cabinet), var(--bg-cabinet)) 9px 6px / 2px 8px no-repeat;
}